vue项目学习

1，业务开发流程回顾

2，技术选型分析

3，工程构建安装

4，项目设计及原理分析

5，首页开发

9，专题页开发

10，构建工具详解

11，面试进阶

vue.js scss webpack node npm es6 git相关知识

配置好开发环境，掌握项目各项设计的原理

先学习首页的组件化设计，思考和动手实施理财开发

学会项目构建和配置

总结项目技能，沉淀经验，梳理知识

学员收益

1，撞我css模块化技术以及模块化设计

学会前端项目的自动化构建，涉及方方面面

适用对象

1，具备前端基础知识

2，了解mvvm,如vue,react,angular

3，希望在业务开发提升技术实力，在面试中表现优异

4，兼容并包的学习心态

环境及知识准备

1，运行环境

1. Node 8.9.1建议适用nvm来管理Node版本
   https://github.com/coreybutler/nvm-windows
2. git
   https://www.bootcss.com/p/git-guide/
3. chrome浏览器

2，构建环境

1. webpack 3.10.0
   https://doc.webpack-china.org/
2. npm scripts
   http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html
3. babel
   简单了解：
   https://babeljs.cn/docs/usage/polyfill/
   深入了解：
   https://www.imooc.com/article/21866

3，编辑器

1. Atom
   https://atom.io/

   linter-eslint	格式化
   atom-beautify	格式化
   emmet	代码提示，快速输入
   snippets	代码片段
   language-vue	自动补齐

2. ESLint
   http://eslint.cn/docs/user-guide/configuring

4，基础知识

1. ES6
   代码对比网站
   http://es6-features.org/#Constants
2. Sass/scss
   http://sass.bootcss.com/
3. Vue.js
   https://cn.vuejs.org/

业务开发流程

1，技术选型

1.1 构建工具

1. 构建工具有哪些
   gulp grunt webpack fis prepack rollup
   gulp是流式文件，读入一次，在内存中操作
   rollup跟webpack相似，webpack2.0以前大部分使用的rollup，如今差不多了
2. 为什么要构建工具
   资源压缩 静态资源替换 模块化处理 编译处理
   资源压缩：css, js,
   静态资源替换：
   模块化处理：
   编译处理：
3. 我们用哪个构建工具
   webpack npm scripts

1.2 MVVM框架选择

vue.js
react.js
后端转前端，都喜欢用anguler.js
1，根据团队能力
2，框架生态，框架维护更新情况
3，对原理的应用，能不能hold住，能不能对框架吃透

1.3 模块化设计

• css模块化设计
• javascript模块化设计

1.4 自适应方案设计

1. 基本概念
   a、CSS像素，设备像素，逻辑像素，设备像素比
   
   b、viewport
   viewport分三类：
   
   c、rem

2. 工作原理
   a、利用view

1.5 代码维护及复用性设计的思考

• 需求变更
• 产品迭代
• Bug定位
• 新功能开发

2，业务开发

3，测试验证

4，发布上线

二，工程构建安装

• 下载代码 : https://github.com/yjjdick/JDFinance
  mkdir JD cd JD
  git clone git@github.com:zongearth/JDFinance.git
• 安装调试
  cd JDFinance npm install
• 切换到开始分支
  git checkout setup
• 启动项目
  npm start
• 测试验证
  是不是安装正确
  ESlint是不是能检查代码格式
  是不是能编译Vue, ES6
  是不是能编译scss和css
  修改代码后浏览器能不能自动刷新
  css模块化是不是正确

三，项目设计与原理分析

CSS模块化设计

1. 设计原则
   a. 可复用能继承要完整
   b. 周期性迭代
   优秀的代码是模仿，设计，重构 出来的
2. 设计方法
   a. 先整体后部分再颗粒化
   
   b. 先抽象再具体
   

JS组件设计

1. 设计原则
   a. 高内聚低耦合
   b. 周期性迭代
2. 设计方法
   a. 先整体后部分再颗粒化
   b. 尽可能的抽象

自适应

1. 基本概念
   a. css像素，设备像素，逻辑像素，设备像素比
   
   b. viewport
   viewport分三类：

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   - width: 控制viewport的大小，可指定的一个值，如600，或者特殊值，
   		如：device-width为设备的宽度（单位为缩放为100%时的css的像素）。
   - height:和width相对应，指定高度。
   - initial-scale:初始缩放比例，也即是当页面第一次load的时候缩放比例。
   - maximum-scale:允许用户缩放到的最大比例。
   - manimum-scale:允许用户缩放的最小比例。
   - user-scalable:用户是否可以手动缩放
   

   c. rem

2. 工作原理
   a. 利用viewport和设备像素比调整基准像素
   b. 利用px2rem自动转换css单位

SPA设计

1. 设计意义
   a. 前后端分离
   b. 减轻服务器压力
   c. 增强用户体验
   d. Prerender预渲染优化SEO
2. 工作原理
   a. History API
   
   b. Hash
   git checkout -b router 创建新分支router

构建工具

上线指导

京东金融首页

需求分析

1. 先分析，如何设计
   
   命令
   cd JD/JDFinance
   cd app/js
   mkdir core// 创建一个目录
   touch core/btn.vue
   touch core/panel.vue
   touch core/slider.vue
   查看npm下此包所有版本号：
   npm view versions --json
   安装vue-awesome-swiper插件,百度搜索此插件，有使用说明
   cnpm i vue-awesome-swiper
   查看package.json,查看是否安装好此插件

https://www.npmjs.com/

1. css标签添加 module 使属性名称定义局部化

<style module> 添加module
<div :class="$style.header"> 添加$style

github搜索 hotcss 用于自适应的方案,下载hotcss.js，并放到js目录下，在webpack.config.js中修改，使此js自动打包进项目

上线

1. npm run build 生成上线文件