项目设计与原理分析
环境及知识准备
运行环境
-
Node 8.9.1 建议使用nvm来管理Node版本
- windows版本 https://github.com/coreybutler/nvm-windows
- mac版本 https://github.com/creationix/nvm#install-script
-
Git 简易基础 文档: http://www.bootcss.com/p/git-guide/
-
Chrome 最新浏览器 v62+
使用nvm,打开命令行工具:
- 查看当前的node版本:nvm ls
- 安装所需的node版本:nvm install 8.9.1
- 如果安装了其他高级的版本,可以:nvm use 8.9.1
构建环境
- webpack 3.10.0 文档: https://doc.webpack-china.org/
- npm scripts 文档: https://www.ruanyifeng.com/blog/2016/10/npm_scripts.html
- babel 文档: https://babeljs.cn/docs/usage/polyfill/ http://www.imooc.com/article/21866
编辑器
- Atom https://atom.io/
- ESLint 文档: http://eslint.cn/docs/user-guide/configuring
基础知识
- ES6 http://es6-features.org/#Constants
- Sass Http://sass.bootcss.com/
- Vue.js https://cn.vuejs.org/
业务开发流程
技术选型
构建工具
- 构建工具有哪些
gulp(流式文件,任务管理)、grunt(频繁写文件,任务管理)、webpack(打包)、fis(百度内部集成的方案)、prepack(fackbok推出的代码优化方案,没有dom、bom)、rollup(可以去掉冗余代码) - 为什么要构建工具
资源压缩(js、css、图片) 静态资源替换 模块化处理 编译处理(es6) - 我们用哪个构建工具
webpack(打包)、npm scripts(任务管理)
MVVM框架选择
看团队、看作者对框架的投入程度、对框架原理的理解
- vue(纯前端)
- angular(如果团队人员是后端转前端的较多)
- react
模块化设计
- css模块化设计
- js模块化设计
自适应方案设计
代码维护及复用性设计的思考
- 需求变更
- 产品迭代
- Bug定位
- 新功能开发
业务开发
测试验证
发布上线
工程构建安装
- 下载代码 git clone git@github.com:cucygh/JDFinance.git
- 安装调式
- cd JDFinance
- npm install
- 切换分支 git checkout setup
- 启动服务 npm start
- 测试验证
- 是不是安装正确
- ESlint是不是能检查代码格式
- 是不是能编译vue、es6
- 是不是能编译scss、css
- 修改代码后浏览器能不能自动刷新
- css模块化是不是正确
项目设计与原理分析
css模块化设计
设计原则
-
可复用能继承要完整
-
周期性迭代
优秀的代码是模仿出来的
优秀的代码时设计出来的
优秀的代码时重构出来的
设计方法
-
先整体后部分再颗粒化
-
先抽象在具体
代码书写
- 在app下面建css/layout.scss和element.scss
layout.scss
使用flex布局:
@charset "UTF-8";
@mixin flex($direction:column,$inline:block) {
//如果$inline是block,display为flex,否则为inline-flex
display: if($inline==block,flex,inline-flex);
//$direction指定方向
flex-direction: $direction;
flex-wrap: wrap;
}
element.scss
先引入需要的模块:
@import "./layout.scss"