vue实战 京东金融 1 项目设计与原理分析

环境及知识准备

运行环境

• 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模块化设计

设计原则

1. 可复用能继承要完整
   

2. 周期性迭代
   优秀的代码是模仿出来的
   优秀的代码时设计出来的
   优秀的代码时重构出来的

设计方法

3. 先整体后部分再颗粒化
   

4. 先抽象在具体
   
   

代码书写

• 在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";
//按钮样式
@mixin btn($size:14px,$color:#fff,$bgcolor:#F04752,$padding:5px,$radius:5px) {
   
   
  padding