diff --git a/10-Node.js/01-ES6的介绍和常用语法.md b/10-Node.js/01-ES6的介绍和常用语法.md
index f2a069d..dcf72dd 100644
--- a/10-Node.js/01-ES6的介绍和常用语法.md
+++ b/10-Node.js/01-ES6的介绍和常用语法.md
@@ -10,6 +10,11 @@ ECMAScript 是 JS 的语言标准。而 ES6 是新的 JS 语法标准。
PS：严格来说，ECMAScript 还包括其他很多语言的语言标准。
+
+很多人在做业务选型的时候，会倾向于选jQuery。其实jQuery的语法是偏向于ES3的。而现在主流的框架 Vue.js 和React.js的语法，是用的ES6。
+
+ES6中增加了很多功能上的不足。比如：**常量、作用域、对象代理、类、继承**等。这些在ES5中想实现，比较复杂，但是ES6对它们进行了封装。
+
### ECMAScript 发展历史
- 1995年：ECMAScript 诞生。
@@ -32,6 +37,8 @@ ES6 的目标是：让 JS 语言可以编写复杂的大型应用程序，成为
- 流行的库基本都是基于 ES6 构建。 React 默认使用 ES6 标准开发。
+###
+
## ES6的环境配置
掌握 ES6 之后，如果要考虑 ES5 的兼容性，可以这样做：写 ES6 语法的 js 代码，然后通过 `Babel`将 ES6 转换为 ES5。
@@ -438,7 +445,7 @@ ES6允许我们，通过数组或者对象的方式，对一组变量进行赋
```
-### 字符串结构
+### 字符串解构
字符串也可以解构，这是因为，此时字符串被转换成了一个类似数组的对象。举例如下：
@@ -686,6 +693,16 @@ console.log(fn1(1, 2)); //输出结果：3
```
+
+## 模块化
+
+
+
+
+
+
+
+
更多 ES6 的语法，本文会陆续更新。
## 参考链接：
diff --git a/12-Vue框架/00-Vue的介绍和环境配置.md b/11-Vue框架-商城系统/00-Vue的介绍和环境配置.md
similarity index 80%
rename from 12-Vue框架/00-Vue的介绍和环境配置.md
rename to 11-Vue框架-商城系统/00-Vue的介绍和环境配置.md
index e1cf50f..6d30732 100644
--- a/12-Vue框架/00-Vue的介绍和环境配置.md
+++ b/11-Vue框架-商城系统/00-Vue的介绍和环境配置.md
@@ -1,5 +1,7 @@
+- [Get全栈技能点 Vue2.0/Node.js/MongoDB 打造商城系统](https://coding.imooc.com/class/chapter/113.html)
+
## 前端的各种框架
### Vue、React、AngularJS
@@ -10,12 +12,12 @@ AngularJS 提供更多的是一套解决方案，更像是一个生态。
### Vue 和 React 的对比
-20180302_1623.png
+
### Vue 和 React 的相同点
-20180302_1636.png
+
国内的很多开发者喜欢 Vue；国外的开发者更喜欢 React，可以做大型网站。
@@ -31,13 +33,13 @@ Vue1.0没有虚拟DOM，Vue2.0改成了基于虚拟DOM。
### 前端框架回顾
-20180302_1645.png
+
-20180302_1651.png
+
-20180302_1652.png
+
@@ -48,7 +50,7 @@ Vue框架中，没有控制器。
### 发展历史
-20180302_1655.png
+
2016.10发布2.0版本。
@@ -63,7 +65,7 @@ Vue框架中，没有控制器。
-20180302_1658.png
+
上方截图的时间：2018-03-02。
@@ -76,7 +78,7 @@ Vue框架中，没有控制器。
渐进式框架图：
-20180302_1701.png
+
- 声明式渲染：当我们在页面里，通过 new 一个 view 的事例时，
@@ -90,13 +92,13 @@ Vue框架中，没有控制器。
- 扩展功能：路由、ajax、数据流等。
-20180302_1750.png
+
-20180302_1751.png
+
-20180302_1752.png
+
-20180302_1753.png
+
## Vue 的环境搭建
@@ -157,14 +159,14 @@ $ cnpm i vue --save
我们可以看到 vue.js 的安装目录：
-20180302_2252.png
+
-20180302_2255.png
+
此时在 src 中需要引入的路径是：
-20180302_2106.png
+
上图中的引入方式，不是很理解。
@@ -208,17 +210,17 @@ $ vue init webpack-simple VueDemo01
```
-然后根据提示输入 project name（要求小写），description 默认即可：
+然后根据提示输入 project name（**要求小写**），description 默认即可：
-20180303_0850.png
+
上方截图中，`npm install `指的是下载各种依赖包，`npm run dev`指的是打开发包，`npm run build`指的是打生产包。
我们可以看到这个项目的结构：
-20180303_0851.png
+
- src：项目源码
@@ -247,7 +249,7 @@ cnpm run dev
这个空的项目就可以在浏览器上跑起来：
-20180303_0853.png
+
如果是在webstorm中开发这个项目，会有点卡，因为依赖的包比较多，重启软件即可。
@@ -263,13 +265,13 @@ $ vue init webpack VueDemo02
然后根据提示依次输入：
-- project name：要求小写。
+- project name：**要求小写**。
- description：默认即可。
- vue-router：需要。
-- ESlint：语法检查，初学者暂时不需要。
+- ESlint：语法检查，初学者可以暂时不需要。
- 单元测试：暂时也不需要。
@@ -297,15 +299,15 @@ cnpm run dev
这个空的项目就可以在浏览器上跑起来。
-20180303_0911.png
+
-20180303_0913.png
+
## vue 项目结构分析
-20180303_1010.png
+
- buid：打包配置的文件夹
@@ -331,8 +333,6 @@ cnpm run dev
-
-
### 图片的base64编码
默认是10k以下，建议都通过 base64编码。在配置文件`webpack.base.conf.js`中进行修改：
@@ -349,15 +349,15 @@ cnpm run dev
## Vue 基础语法
-20180303_1130.png
+
-20180303_1135.png
+
-20180303_1145.png
+
-20180303_1146.png
+
-20180303_1150.png
+
diff --git a/12-Vue框架/01-项目介绍.md b/12-Vue框架-组件化思维/01-项目介绍.md
similarity index 94%
rename from 12-Vue框架/01-项目介绍.md
rename to 12-Vue框架-组件化思维/01-项目介绍.md
index 8e390fd..0992934 100644
--- a/12-Vue框架/01-项目介绍.md
+++ b/12-Vue框架-组件化思维/01-项目介绍.md
@@ -116,6 +116,19 @@ Git简易基础：
-
+在Atom中可以安装如下插件：
+
+- `linter-eslint`：语法检查
+
+- `Atom Beautify`：代码格式化
+
+
+- `Emmet`：快速完成html的输入
+
+- `Snippets`快速生成 js 代码片段。
+
+
+
### 相关基础知识
@@ -268,9 +281,9 @@ JS模块化设计：
npm start
```
-目的是：通过浏览器访问当前的页面：
-
-
+目的是：通过浏览器访问当前的页面。效果如下：
+
+20180308_1145.png
diff --git a/12-Vue框架/02-项目设计与原理分析.md b/12-Vue框架-组件化思维/02-项目设计与原理分析.md
similarity index 100%
rename from 12-Vue框架/02-项目设计与原理分析.md
rename to 12-Vue框架-组件化思维/02-项目设计与原理分析.md
diff --git a/12-Vue框架/03-京东金融的首页.md b/12-Vue框架-组件化思维/03-京东金融的首页.md
similarity index 100%
rename from 12-Vue框架/03-京东金融的首页.md
rename to 12-Vue框架-组件化思维/03-京东金融的首页.md
diff --git a/12-Vue框架/09-上线指导.md b/12-Vue框架-组件化思维/08-上线指导.md
similarity index 100%
rename from 12-Vue框架/09-上线指导.md
rename to 12-Vue框架-组件化思维/08-上线指导.md
diff --git a/12-Vue框架-组件化思维/09-构建工具.md b/12-Vue框架-组件化思维/09-构建工具.md
new file mode 100644
index 0000000..06e2cf3
--- /dev/null
+++ b/12-Vue框架-组件化思维/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。
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+
+
+
+
+
diff --git a/12-Vue框架-组件化思维/11-面试技巧.md b/12-Vue框架-组件化思维/11-面试技巧.md
new file mode 100644
index 0000000..f32e917
--- /dev/null
+++ b/12-Vue框架-组件化思维/11-面试技巧.md
@@ -0,0 +1,35 @@
+
+
+
+## 前言
+
+面试提问包括：
+
+- 同学做过哪些项目
+
+- 为什么用这样的框架
+
+- 在项目中的角色是什么？解决过哪些**难题**？
+
+“难题”是表现自己的机会，不要错过。
+
+- 通过这个项目学到了什么？
+
+这个问题不好回答。要独具一格，不要芸芸众生。
+
+
+面试分析：
+
+- 二面考什么
+
+- 项目要怎么准备
+
+- 项目该怎么介绍
+
+- 沟通有哪些技巧
+
+
+## 面试分析
+
+
+
diff --git a/12-Vue框架/Vue-router.md b/12-Vue框架-组件化思维/Vue-router.md
similarity index 100%
rename from 12-Vue框架/Vue-router.md
rename to 12-Vue框架-组件化思维/Vue-router.md
diff --git a/12-Vue框架/Vue基础知识.md b/12-Vue框架-组件化思维/Vue基础知识.md
similarity index 100%
rename from 12-Vue框架/Vue基础知识.md
rename to 12-Vue框架-组件化思维/Vue基础知识.md
diff --git a/12-Vue框架/z商城系统.md b/12-Vue框架-组件化思维/z商城系统.md
similarity index 100%
rename from 12-Vue框架/z商城系统.md
rename to 12-Vue框架-组件化思维/z商城系统.md