update

2018-05-04 20:36:07 +08:00
parent 109e9cfd2f
commit ca8ea46c72
12 changed files with 46 additions and 1 deletions
--- a/22-前端工程化/01-Webpack.md
+++ b/22-前端工程化/01-Webpack.md
@@ -0,0 +1,46 @@
+
+
+
+## 关于 Webpack 
+
+### WebPack的介绍
+
+
+- 中文文档：<https://doc.webpack-china.org/concepts/>
+
+
+
+
+
+
+
+### 文本的开发环境
+
+
+
+
+
+
+## Webpack4 的升级说明
+
+如果Webpack要更新到4，会导致其他的内容也会变化：
+
+- 版本变化：loader、plugin也要相应升级。
+
+- 配置变化：增加了 module 的配置项，用来区分开发环境和生产环境。
+
+- 插件变化：比如，webpack 3中的`CommonsChunkPlugin`在4中取消了，而是通过...去配置。
+
+
+参考链接：
+
+- [webpack4升级指北](https://www.imooc.com/article/23555)
+
+
+
+
+
+
+
+
+
--- a/22-前端工程化/01-项目介绍.md
+++ b/22-前端工程化/01-项目介绍.md
@@ -0,0 +1,300 @@
+
+
+## 前言
+
+
+
+>印象最深的就是模块化设计，自适应方案，SPA设计的讲解以及webpack如何自己构建的方法和思想。
+
+
+> 自适应方案设计和CSS模块化绝对是特色内容。
+
+### 组件化的现状
+
+- 组件化缺乏**方法论**。组件化没有严格的定义。虽然大家都在用框架，但什么情况下定义一个组件，什么情况下不定义一个组件，缺乏方法论。
+
+- 组件化的**设计**不合理。组件划分过细，组件数量很庞大；组件数量少，导致项目的**抽象设计和复用性设计**达不到理想的效果。
+
+- 组件化的**战斗力**体现不足。我们开发的目的是：让开发的敏捷度更高、开发效率更高、复用性设计、业务开发的组合能力更强，给团队带来更大的战斗力。如果组件化的设计不合理，就...
+
+
+
+### 本项目特色
+
+- 组件化的思维方式及项目设计
+
+- **组件化和模块化**不仅仅是 js，也包括 css。
+
+- 如何将项目作出两点，面试又如何表现
+
+- 学会独立构建一个项目，做到独当一面
+
+
+### 本项目内容
+
+- 业务开发流程回顾
+
+- 技术选型分析
+
+
+- 工程构件安装
+
+- 项目设计及原理分析
+
+### 开发模块
+
+- 首页开发
+
+- 理财开发
+
+- 白条开发
+
+- 众筹开发
+
+- 专题页开发（活动专题）
+
+- 构建工具
+
+
+
+### 项目收益
+
+- 掌握CSS模块化技术及模块化设计
+
+- 组件化的概念并不陌生，如何在一个复杂的项目中把组件化设计的灵活才重要
+
+- 学习项目和vue的相关用法
+
+- 学习前端项目的自动化构建
+
+
+## 项目的开发环境及版本
+
+> 前端行业里，最常用的技术栈是：HTML5/CSS3 +  ES6 + vue/react + Webpack + Sass。
+
+
+### 运行环境
+
+1、**nodejs**：Node 8.9.1。建议使用 nvm 管理 Node版本。
+
+- nvm 的windows版：<https://github.com/coreybutler/nvm-windows>
+
+- nvm 的 mac 版：<https://github.com/creationix/nvm>
+
+2、 **Git**。
+
+Git简易基础：<http://www.bootcss.com/p/git-guide/>
+
+3、**chrome**：v62+
+
+4、**Webpack** 3.10.0。
+
+- Webpack中文文档：<https://doc.webpack-china.org/>
+
+
+### 构建环境
+
+1、**Webpack 3.10.0**
+
+2、**npm scripts**
+
+- 利用`npm`做任务管理：<http://ruanyifeng.com/blog/2016/10/npm_scripts.html>
+
+3、**babel**。`babel`是ES6必备的工具之一。
+
+- <https://babeljs.cn/docs/usage/polyfill>
+
+- [文章 | ES6和Babel你不知道的事儿](http://www.imooc.com/article/21866)
+
+
+### 编辑器
+
+1、Atom。
+
+2、**ESLint**。代码的质量和规范检查的工具。
+
+- <http://eslint.cn/docs/user-guide/configuring>
+
+
+在Atom中可以安装如下插件：
+
+- `linter-eslint`：语法检查
+
+- `Atom Beautify`：代码格式化
+
+
+- `Emmet`：快速完成html的输入
+
+- `Snippets`快速生成 js 代码片段。
+
+
+
+### 相关基础知识
+
+
+1、ES6。
+
+- <http://es6-features.org/#Constants>
+
+2、Sass。
+
+- <http://sass.bootcss.com/>
+
+3、Vue.js
+
+- <https://cn.vuejs.org/>
+
+
+## 业务开发流程
+
+业务开发流程包括以下四个方面。
+
+### 技术选型
+
+**1、构建工具**：
+
+构建工具包含；gulp、grunt、webpack、fis、prepack、rollup。
+
+
+gulp、grunt、webpack三者的区别：
+
+- gulp或grunt：本质是做任务的**分配和管理**。webpack：本质是做**编译和打包**。
+
+- gulp或grunt编译的时候，其实还是调用的Webpack。
+
+- grunt比gulp问世要早。现在基本是用的gulp，因为gulp是做流处理，不会频繁的写文件和读文件。
+
+`fis`：是百度内部推荐的构建的集成方案。
+
+`prepack`： facebook的代码优化方案。有一些局限性，可以关注后续的动作。
+
+`rollup`：和prepack类似。但是现在webpack中也加入了rollup的功能。
+
+
+**为什么要用构建工具**：资源压缩、静态资源替换、模块化处理、编译处理。（如果人工来做这些事情，会很繁琐，显然要用构建工具）
+
+**本项目用什么构建工具：**用`Webpack`做编译打包，用`npm scripts`做任务管理（可以对比下gulp）。
+
+
+
+
+2、**MVVM框架选择**：
+
+如果大家都是后端出身的，可以考虑用Angular。
+
+看框架的作者维护的热度。如果框架本身有问题，首先需要他们来维护。
+
+看业务是能达到业务和性能的要求。
+
+
+
+
+
+**3、模块化设计**
+
+CSS模块化设计：
+
+20180308_1101.png
+
+
+比如，两个按钮，都用了一个className。比如，代码怎么复用。
+
+JS模块化设计：
+
+20180308_1106.png
+
+
+比如：
+
+- `common.js`放账号登录的信息，这个是整个公司所有的大项目**通用**的。
+
+- `layout.js`：抽象出来的布局。给子类 page1 和 page2用。
+
+
+
+
+
+**4、自适应方案设计**：
+
+
+20180308_1110.png
+
+如何用一套代码，让一份设计稿，在不同的浏览器上有相同的体验。
+
+
+
+
+
+**5、代码维护及复用性设计的思考**：
+
+- 需求变更
+
+- 产品迭代
+
+- bug定位
+
+- 新功能开发
+
+
+### 业务开发
+
+
+### 测试验证
+
+### 发布上线
+
+
+
+##  工程构建安装
+
+
+### 下载工程文件
+
+项目地址：<https://github.com/cucygh/JDFinance>
+
+
+### 安装调试
+
+（1）在node环境下，安装项目所依赖的package：
+
+```
+	cd JDFinance
+
+	npm install
+```
+
+如果安装的很慢，可以使用淘宝的镜像。
+
+（2）切换到setup分支：
+
+```
+	git checkout setup
+```
+
+
+本项目所有的模块（setup、home等模块）都用分支管理。
+
+
+（3）启动服务：
+
+```bash
+	npm start
+```
+
+目的是：通过浏览器访问当前的页面。效果如下：
+
+20180308_1145.png
+
+
+
+
+
+
+
+
+
+
+
+
+
+
--- a/22-前端工程化/02-项目设计与原理分析.md
+++ b/22-前端工程化/02-项目设计与原理分析.md
@@ -0,0 +1,288 @@
+
+
+## 项目设计与原理分析
+
+包括以下内容：
+
+
+- CSS模块化设计
+
+- JS组件设计
+
+- 自适应方案
+
+- SPA设计
+
+- 构建设计
+
+- 上线指导
+
+### 面试相关
+
+模块化设计的关键词：**封装、继承**；把**通用**的模块**先抽象，后具体**，达到**复用**。【面试记住】
+
+比如，**panel、按钮、轮播图**、列表等等，都可以提取为**抽象**的组件，复用。
+
+
+本文先讲CSS模块化设计。
+
+## CSS模块化设计
+
+1、**设计原则**：
+
+- 可**复用**、能**继承**、要完整。
+
+- 周期性迭代
+
+
+2、**设计方法**：
+
+- 先整体后部分，再颗粒化。
+
+
+20180308_1603.png
+
+上图中，整体指的是“布局”。
+
+
+- **先抽象再具体**。【重要】
+
+
+
+20180308_1615.png
+
+上图中，先看整体的布局，有哪些版块；具体的版块中，有横向列表、纵向列表；最后再是功能。
+
+比如，**panel、按钮、轮播图**等等，都可以提取为**抽象**的组件，复用。
+
+
+
+
+
+
+**总结：**
+
+
+20180308_1620.png
+
+三个模块：
+
+- `reset.css`：不同的浏览器有默认的样式，我们要去掉。
+
+- `layout.css`：布局层面。属于抽象部分。
+
+- `element.css`：功能层面（比如列表、按钮）
+
+
+
+如果你想给两个组件，采用相同的名称，但是样式不同，这个时候就要用到 module。
+
+通过 global和scope的方式，我们就实现了模块的**复用、继承、私有化**。
+
+
+
+## JS组件设计
+
+
+1、**设计原则**：
+
+- **a、高内聚低耦合**。
+
+高内聚：模块功能的专一性高，独立性强。低耦合：是模块之间的联系尽量少，尽量简单。
+
+高内聚：尽量让组件的功能受控于组件本身，而不是依赖于其他的组件。
+
+低耦合：两个模块相同的功能，提取成一个公共的**抽象组件**，但这两个模块没有任何耦合的关系。
+
+
+- b、周期性迭代
+
+需要不断迭代，才能知道什么样的组件最符合自己的业务场景。
+
+
+
+2、**设计方法**：
+
+- 先整体后部分再颗粒化。
+
+
+写抽象的组件，然后继承抽象的组件，达到颗粒化。
+
+
+- 尽可能的抽象。
+
+
+
+
+## 自适应方案设计
+
+如何用一套代码，让一份设计稿，在不同的浏览器上有相同的体验。
+
+
+### 单位的基本概念
+
+
+- **`px`**：是`pixel`（像素）的缩写，是相对单位。px = **CSS像素** = **逻辑像素**。
+
+- **`dpi`**：dot per inch，没英寸有多少个点。代表的是屏幕的细腻程度。计算方式：勾股定理。
+
+常见的dpi：
+
+20180308_1755.png
+
+
+- **`ppi`**： Pixel per inch，每英寸的像素数。当用于描述显示器设备时ppi与dpi是同一个概念 。
+
+换算公式：px=dp*(dpi/160)。
+
+- **`dip`**：逻辑像素。简称是`dp`。
+
+
+- **设备像素（物理像素）：**单位是`pt`，是绝对单位。1pt = 1/72(inch)。inch即英寸，而1英寸等于2.54厘米。
+
+比如苹果的Retina视网膜显示屏，一个px需要两个物理像素来表示：
+
+20180308_1753.png
+
+说白了，普通的显示器上，一个px对应的是硬件上的真实像素；但是在Retina屏上，比例是1:2（1个逻辑像素 需要 4个物理像素 来表示）。由此得出了**设备像素比**：
+
+- 设备像素比(dpr)：公式为1px = (dpr)^2 * 1dp。
+
+
+
+推荐链接：
+
+- [CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport](https://github.com/jawil/blog/issues/21)
+
+
+
+### viewport 视口
+
+做过移动端的都知道这一行：
+
+```html
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+```
+
+解释：声明当前网页在移动端浏览器中展示的相关设置。我们在做移动 web 开发时，就用上面这行代码设置 viewport。
+
+视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示。
+
+
+需要注意的是：
+
+- 目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；
+- 此属性为移动端页面视口设置，上方代码设置的值，表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）。
+
+属性解释：
+
+- width:设置viewport的宽度。
+- initial-scale：初始化缩放比例。
+- minimum-scale:最小缩放比例。
+- maximum-scale:最大缩放比例。
+- user-scalable:是否允许用户手动缩放（值可以写成yes/no，也可以写成1/0）
+
+
+PS：如果设置了不允许用户缩放，那么最小缩放和最大缩放就没有意义了。二者是矛盾的。
+
+**viewport分为三类：**
+
+20180308_1825.png
+
+
+- layout viewport：可以理解成页面区域
+
+- visual viewport：浏览器的可视区域
+
+- ideal viewport：完美适配。（1）不需要用户缩放和横向滚动条；（2）显示的文字的大小是否合适。不同设备拥有不同的ideal viewport。如，所有iphone的ideal viewport宽度都是320px，而安卓设备比较复杂，可以在网站<http://viewportsizes.com>上查。
+
+如果让 `layout viewport = ideal viewport`，我们就做到了完美适配。
+
+
+### 设置字体大小：em和rem
+
+- em：相对于父元素的比例。
+
+- rem：css3中的属性，相对于根元素`<html>`的 比例。浏览器默认的字号16px。
+
+参考链接：<https://segmentfault.com/a/1190000004605022>
+
+
+### 工作原理
+
+> 面试如果问怎么做自适应，就回答这两点。
+
+（1）利用`viewport`和设备像素比，调整基准像素。
+
+（2）利用`px2rem`自动转换css单位。我们需要将移动端的字体，从 px转换为 rem。
+
+
+## SAP设计
+
+
+### 设计意义
+
+- 前后端分离：前端专注于业务、视图（交互）；后端专注于服务、数据。
+
+- 减轻服务器压力：十几个页面，只用请求一次。
+
+- 增强用户体验
+
+- 缺点：SEO有一些弱势。补充知识点：[Prerender预渲染优化SEO](http://codingfishman.github.io/2016/05/06/prerender%E9%A2%84%E6%B8%B2%E6%9F%93%E4%BC%98%E5%8C%96SEO/)。
+
+
+### 工作原理
+
+1、方式一：**History API**（HTML5中新增的）。很优雅，但对浏览器有要求。
+
+
+20180308_1925.png
+
+必要条件：
+
+（1）要执行打开的操作。
+
+（2）要有历史记录的操作单。
+
+- pushState：创建历史记录。
+
+- onpopstate：监听前进、后退的事件。
+
+
+2、方式二：Hash。不是很优雅，但是兼容性好。
+
+
+20180308_1926.png
+
+
+
+
+## 构建工具的安装和配置
+
+20180308_1945.png
+
+
+- `Webpack`：安装、配置。
+
+- `babel`：将ES6转为ES5。
+
+- `dev-server`：页面的更新、渲染和服务。
+
+另外还有`npm scripts`，这个比较简单，这里就不提了。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
--- a/22-前端工程化/03-京东金融的首页.md
+++ b/22-前端工程化/03-京东金融的首页.md
@@ -0,0 +1,69 @@
+
+
+## 需求分析
+
+京东金融首页的需求分析如下：
+
+- 头部
+
+- 轮播图
+
+- 新手特权
+
+- 极速借贷
+
+- 理财精选
+
+- 新品推荐
+
+- 生活服务
+
+- 在线客服
+
+- 公司介绍
+
+- 导航条
+
+20180308_1953.png
+
+
+目前，大多数设计稿的尺寸是iPhone5：320*568。
+
+拿到设计稿后，要先做架构：
+
+
+### 组件化设计
+
+
+### 按钮
+
+俺就可以设计成抽象的组件。
+
+我们要先给它一个**默认**类名，然后**允许传递进来一个自定义**的类名，这样就实现**继承**了；让自定义的类名去**覆盖**默认的样式，就实现了**复用**。
+
+### panel
+
+
+### 轮播图
+
+Vue有一些常用的组件，可以直接拿来用，比如`vue-awesome-swiper`。链接：<https://www.npmjs.com/package/vue-awesome-swiper>
+
+
+定义一个抽象的轮播图，然后把轮播图的图片和跳转的url作为参数传递。
+
+
+### css module
+
+这个组件有一个类名，另外一个组件可能还有个同名的，为了防止冲突，可以使用命名空间。
+
+
+### 第三方的自适应解决方案
+
+hotcss：<https://github.com/imochen/hotcss>
+
+
+
+
+
+
+
--- a/22-前端工程化/08-上线指导.md
+++ b/22-前端工程化/08-上线指导.md
@@ -0,0 +1,107 @@
+
+
+## 前言
+
+上线指导包括：
+
+- **生产构建**：合并、抽取、压缩、调试。
+
+
+- **发布部署**：提交、部署、开启gzip压缩、更新CDN。
+
+下面来讲一下。
+
+## 生产构建
+
+生产构建包括：
+
+- 合并：style、js
+
+- 抽取：样式要从javaSCript中抽取出来
+
+- 压缩：JS、CSS都要压缩。
+
+- 调试：开启SourceMap。
+
+下面分别讲一下。
+
+### 1&2：合并和抽取
+
+我们发现，首页引入了很多`<style>`节点，它们代表了不同的模块。我们需要把它们合并在一起，然后抽取成一个单独的css文件。
+
+原因很简单：
+
+- 浏览器会先渲染head部分，因此，css在渲染的时候，通常是放在head部分。
+
+- js部分是放在body部分，如果css和js混在一起了，会导致，js的体积比较大。
+
+
+编译出生产环境下的dist：
+
+```
+	npm run build
+```
+
+
+### 3、压缩
+
+给生产环境的代码做压缩工作。
+
+js压缩用webpack官网提到的[`Minification`](https://doc.webpack-china.org/guides/production/#minification)，推荐的插件是`UglifyJSPlugin`。
+
+`UglifyJSPlugin`的指导链接：<https://doc.webpack-china.org/plugins/uglifyjs-webpack-plugin>
+
+css压缩用css loader。
+
+
+### 4、调试
+
+如果要让线上的代码支持**线上调试**，就要开启`sourceMap`。
+
+`sourceMap`的指导链接：<https://doc.webpack-china.org/guides/production/#source-map>
+
+
+## 发布部署
+
+发布部署包括：
+
+- 提交
+
+- 部署
+
+- 开启gzip压缩
+
+- 更新CDN
+
+下面分别讲一下。
+
+
+### 1、提交
+
+使用Git提交代码，管理线上版本。
+
+### 2、部署
+
+php、java等服务器端从Git仓库拉去代码，依次部署到小流量、单机房、跨机房、全量部署。
+
+流程是这样的：前端人员提交代码到Git仓库，后端或者运维人员负责部署代码。后端人员先把代码部署到小流量（一台机器上），供前端人员测试；如果没有问题，就开始部署单机房等等。
+
+### 3、gzip压缩
+
+gzip一般是服务器端在Ngix就配置好了，但是前端人员一定要检查确认一下 css 文件和 js文件有没有开启gzip压缩，避免服务器端人员把这个漏掉了。
+
+### 4、更新CDN
+
+CDN的更新有很多种方式。 方式一：一般情况下，CDN厂商会给业务方提供CDN更新的接口。方式二：有的情况下，会采用自动更新。不管是哪种方式，一定要检查线上的CDN的源代码是否更新了。
+
+比如说，代码中修复了某个bug或者增加了新功能，如果某个地方的CDN没有更新，就会导致**那一片区域**的用户无法访问到你的新代码 or 新功能。
+
+
+
+
+
+
+
+
+
+
--- a/22-前端工程化/09-构建工具.md
+++ b/22-前端工程化/09-构建工具.md
@@ -0,0 +1,274 @@
+
+
+## 前言
+
+Webpack所执行的环境是Node环境。
+
+
+## 项目准备
+
+（1）创建目录：
+
+
+```
+	mkdir WebpackTest
+```
+
+PS：文件夹的名字不要起关键字`webpack`，避免冲突。
+
+
+
+
+（2）初始化空的目录：
+
+```
+	npm init
+```
+
+输入上述命令后，根据提示输入 project name（**要求小写**），其他的采用默认即可，一路回车，最后输入`y`表示yes。
+
+这个命令的作用是创建一个初始化的文件`package.json`。如下图所示：
+
+
+接下来，npm才能正常地安装各种 package。
+
+（3）创建业务目录：
+
+20180309_0928.png
+
+
+
+## 文件配置
+
+### 创建配置文件 webpack.config.js
+
+`webpack.config.js`是Webpack所需要的配置文件，我们直接在项目的根目录中新建这个文件即可。
+
+接下来，我们需要对这个文件进行配置。包括如下部分：
+
+
+**基础配置**：（也是webpack必须有的配置）
+
+- entry：入口。表示webpack要构建哪个文件。
+
+- module：配置各种loader。
+
+- plugins：所依赖的插件
+
+- output：构建成功后，输出的位置。
+
+**进阶配置**：
+
+- `resolve`
+
+- `devtool`
+
+- `devServer`
+
+上面的内容，我们详细来介绍。
+
+
+### 基础配置
+
+我们在`webpack.config.js`文件里可以这样写：
+
+```javascript
+const path = require('path');
+
+module.exports = {
+  entry: {
+    app: '.app/js/main.js'  //webpack从这个文件作为入口，进行构建
+  },
+  module: {
+    loaders: [{    //告诉webpack，什么样的文件就用什么解析器
+      test: /\.html$/,   //这里用到了正则
+      loaders: `html-loader` //所有的loaders都要单独安装。稍后再说
+    },{
+      test: /\.vue$/,
+      loaders: `vue-loader`
+    },{
+      test: /\.scss/,
+      //【注意】webpack支持多个loader的串行解析，解析顺序**从右向左**。
+      //这里的解析顺序是：遇到sass文件时，先用sass loader进行处理；处理结束后，交给css loader；css loader处理结束后交给 style loader
+      loaders: `style-loader!css-loader!sass-loader`
+    }]
+  },
+  plugins: [],
+  output: {
+    filename: '[name].min.js',   //这里的`[name]`是变量，不要乱写，它是和上面的 entry 里面的 app 对应起来的。
+    path: path.resolve(__dirname, './dist') //值里面的`path`就是第一行里通过Node.js的方式引入的path。`__dirname`是环境变量，代表当前路径。
+  }
+}
+
+
+```
+
+注意上方代码的注释，写得很详细。尤其注意scss文件的解析方式。
+
+光这样写还不够，我们还要安装`module`部分所列出的各种loader：
+
+```bash
+# D 表示开发依赖
+npm i html-loader D
+
+# 一次性安装各种loader
+npm i vue-loader style-loader css-loader sass-loader -D
+```
+
+
+### 进阶配置
+
+
+**1、devServer：**
+
+我们在本地开发时，常常需要启动一个服务，这样的话，我们不再使用file协议，而是使用http协议。这里就需要用到配置文件里的`devServer`参数。
+
+我们先打开Webpack的官方文档里关于**[devServer](https://doc.webpack-china.org/configuration/dev-server/#devserver)**的部分。摘取下面的代码，直接copy到`webpack.config.js`文件里，位置和`module`并列：
+
+```javascript
+devServer: {
+  contentBase: path.join(__dirname, "dist"),
+  compress: true,
+  port: 9000
+}
+```
+
+参数解释：
+
+- `contentBase`：如果你需要提供一个静态文件，这里就配置静态文件的输出路径。
+
+- `compress`：表示整个服务要开启gzip压缩。
+
+- `port`：服务占用的端口。
+
+
+然后，如下如下命令，安装`[webpack-dev-server](https://doc.webpack-china.org/guides/development/#%E4%BD%BF%E7%94%A8-webpack-dev-server)`：
+
+```
+npm install --save-dev webpack-dev-server
+```
+
+
+
+### 其他
+
+构建工具还可以帮我们把px转成rem。
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+
+
+
+
+
--- a/22-前端工程化/11-面试技巧.md
+++ b/22-前端工程化/11-面试技巧.md
@@ -0,0 +1,40 @@
+
+
+
+## 前言
+
+**面试提问**包括：
+
+- 同学做过哪些项目
+
+- 为什么用这样的框架
+
+- 在项目中的角色是什么？解决过哪些**难题**？
+
+“难题”是表现自己的机会，不要错过。
+
+- 通过这个项目学到了什么？
+
+这个问题不好回答。要独具一格，不要芸芸众生。
+
+
+**面试分析**：
+
+- 二面考什么
+
+- 项目要怎么准备
+
+- 项目该怎么介绍
+
+- 沟通有哪些技巧
+
+
+
+## 面试演练
+
+
+
+参考链接：<https://github.com/cucygh/JDFinance/blob/master/QAforLesson12-3.md>
+
+
+
--- a/22-前端工程化/Vue-router.md
+++ b/22-前端工程化/Vue-router.md
@@ -0,0 +1,45 @@
+
+## 路由的概念
+
+
+### 前端路由
+
+路由：根据不同的 url 地址展示不同的内容或页面。
+
+前端路由：把不同路由对应不同的内容（页面）的任务交给前端来做。以前是通过服务器端根据url的不同返回不同页面来实现的。
+
+
+什么时候使用前端路由：在单页面应用中，大部分页面结构不变，只改变部分内容的使用。
+
+
+### 前端路由的优点和缺点
+
+
+优点：
+
+- 用户体验好，不需要每次都从服务器全部获取，快速展现给用户。
+
+缺点：
+
+- 不利于 SEO。
+
+- 使用浏览器的前进、后退键时，会重新发送请求，没有合理利用缓存。
+
+- 单页面无法记住之前滚动的位置，无法在前进、后退时记住滚动的位置。
+
+
+## vue-router 构建 SPA
+
+### 动态路由
+
+20180303_1335.png
+
+
+
+## axios
+
+尤雨溪之前发微博说， vue-resource 不再是官方推荐的插件，推荐使用 `axios`。
+
+
+
+
--- a/22-前端工程化/Vue基础知识.md
+++ b/22-前端工程化/Vue基础知识.md
@@ -0,0 +1,15 @@
+
+
+## 基础知识介绍
+
+Vue 的基础知识包括：
+
+20180303_1237.png
+
+20180303_1238.png
+
+
+实例 --> 组件 --> 指令 --> 选项 --> 模板渲染 --> 事件绑定 --> 计算属性 --> 内置动画 --> 组件交互 --> 路由等。
+
+
+## 实例对象
--- a/22-前端工程化/z商城系统.md
+++ b/22-前端工程化/z商城系统.md
@@ -0,0 +1,56 @@
+02-商城系统.md
+
+## 商城系统介绍
+
+### 商城系统包含的模块
+
+- 商品列表
+
+- 购物车
+
+- 地址
+
+- 结算
+
+- 订单
+
+- 登录等
+
+
+### 技术栈
+
+前端使用：Vue 全家桶以及 ES6。
+
+后端使用：Express 框架、DB 使用 Mongo。
+
+### 项目整体架构
+
+20180302_1850.png
+
+
+### 课程安排
+
+
+20180302_1851.png
+
+20180302_1852.png
+
+
+### 项目地址
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+