Code Monkey home page Code Monkey logo

template-workshop's Introduction

模版工坊

自述

这是一个自由兼职的项目,具体的流程就是拉取项目代码,选择你要修改的模版类型(前台、后台、小程序),去花瓣、小红书这类网站搜索一些对应的网页设计、排版、配色等作为参考,在对应模版项目内的diy.csspublic/img 里进行修改,通过只修改 CSS 文件让项目页面的布局、配色、图片等发生变化,基本要求只有两个:页面整体看起来有明显变化视觉效果看起来不难看

一些人可能觉得这个事情没法搞,因为没有明确的需求。他们想要的是,有人给他提供设计图,他按照设计图进行代码编写,这样的流程才是对的。

但是我要说,做这个事情不需要这么标准的流程,还需要有项目经验背景和设计背景的同学把自己脑子里的条条框框去掉,只有这样才能做好这个事情。

在遵循上面说的两点要求的情况下,你已经获得了最大限度的开发自主权,这个事情真的不难,因为我们有兼职的宝妈在学了两周CSS后就能做出合格的模版,你难道还不如一个没有任何编码基础的宝妈吗?

模版修改的难易程度如果排个顺序的话,是这样的:uni-app > home-template > admin-template。

当然相关的报酬也是不一样的,依次对应为:

  • ¥500 (uni-app)
  • ¥500 (home-template)
  • ¥200 (admin-template)

这个事情适合宝妈和计算机专业的大学生做,如果你是上班族不建议,因为你的时间比较值钱。

Q&A

Q:我是大学生,但是我不是计算机专业的可以做吗?

A:可以,你只需要会CSS就可以,如果不会需要先学习CSS,打好基础,一般两周左右就可以熟练使用。我这边可以推荐B站免费课程给你,也可以指导和给你安排练习辅助你学习。

Q:钱怎么结算,日结吗?

A:你的模版提交后,相关同事会负责审核,审核通过就会结钱给你,这个周期不会超过一周。但是这个模版验收过程中会有修改意见或问题缺陷都是需要你这边修复好的。

Q:这个是长期兼职吗?

A:是的

Q:做的过程中遇到问题怎么办?模版如何提交审核?

A:会有微信群,在微信群里沟通,问问题、提交审核、结款

Q:做模版的时限有要求吗?

A:有的,所有的模版如果比较熟悉的话基本都可以一天左右出一个。刚开始新手会不做太高要求,一周左右出一个就可以。建议的时间是:后台模版1-2天,前台模版1-3天,uni-app模版可以1-7天。具体看你自己的时间投入。

Q:我是大学生,我有很多师兄弟想要做这个东西,那我可以做我们学校的代理吗?

A:太可以了,如果你你能拉一个10人左右的小团队做模版,一周能保证产出5套模版以上,就可以成为学校的代理,当然会有额外的酬劳。

Q:怎么联系?

A:我的邮箱是:[email protected],邮件注明意图和你的情况简介就好,如果有份简历是最好的。

开发说明

  1. 只能修改 public 目录下 diy.css 文件和 img 目录下的图片
  2. 可以用 !important 覆盖样式
  3. 本地安装依赖遇到报错 node-sass 安装失败的时候,在本地安装 python2.7.18 配置对应的环境变量即可
  4. 本项目基于vue2,需要本地构建,所以需要你本地安装Node.js@14,高一点低一点的版本没有测试,推荐使用这个版本下载地址

使用 LESS【非必要】

  1. 第一步在 vscode 插件市场安装 easy-less 插件
  2. 在项目根目录下新建 .vscode/settings.json
  3. 复制如下代码到 .vscode/settings.json 文件中
{
    "less.compile": {
        "main": ["${workspaceFolder}/public/less/diy.less"],
        "compress": true,
        "sourceMap": false,
        "out": "${workspaceRoot}/public/css/diy.css"
    }
}
  1. public 目录下,新建 diy.less 文件,就可以在项目中使用 less 进行开发了,保存 less 文件后会自动生成 diy.css 文件到 public/css 目录下并自动热更新项目。

后台模版 admin-template

演示地址

后台演示地址

登录账号:admin/asd123

一些参考

  1. https://huaban.com/pins/5852327058

项目启动

cd admin-template

# 使用 yarn
# 安装依赖
yarn
# 启动服务
yarn dev

# 使用 npm
# 安装依赖
npm install
# 启动服务
npm run dev

前台模版 home-template

演示地址

前台演示地址

登录账号:admin/asd123

项目启动

cd home-template

# 使用 yarn
# 安装依赖
yarn
# 启动服务
yarn dev

# 使用 npm
# 安装依赖
npm install
# 启动服务
npm run dev

uniapp 模版

一些参考

  1. https://huaban.com/pins/3445325461
  2. https://huaban.com/pins/5314154515

启动项目

cd uniapp-template

# 使用 yarn
# 安装依赖
yarn

# 启动微信小程序,需要安装小程序开发者工具
yarn dev:mp-weixin

# 启动h5在浏览器里调试
yarn serve

# 使用 npm
# 安装依赖
npm install

# 启动微信小程序,需要安装小程序开发者工具
npm run dev:mp-weixin

# 启动h5在浏览器里调试
npm run serve

特别注意

  1. 需要下载小程序开发工具打开项目,同时需要兼容H5、小程序、app
  2. 小程序的样式和APP基本一样,也就是说小程序的样式调整好App自然就好了
  3. H5和小程序的样式会有一点差异,调整好任何一端后都需要去另一端测试和验证兼容性问题,做好自测,可以有效减少返工
  4. diy.scss 在 src/static/css/目录下

template-workshop's People

Contributors

fe-sequoia avatar

Watchers

 avatar

Forkers

lanan66 owenspj2

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.