From 9e9bff724ccc269ead7375247315d938b2ab8c21 Mon Sep 17 00:00:00 2001
From: qianguyihao <qianguyihao@gmail.com>
Date: Thu, 8 Mar 2018 16:46:09 +0800
Subject: [PATCH] =?UTF-8?q?add=20file=EF=BC=9Avue=E9=A1=B9=E7=9B=AE?=
 =?UTF-8?q?=E4=BB=8B=E7=BB=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 06-前端基础/09-算法问题.md     |   7 -
 10-Node.js/01-Node.js入门.md   |  23 +--
 12-Vue框架/02-项目介绍.md      | 288 ++++++++++++++++++++++++++++++++-
 12-Vue框架/03-CSS模块化设计.md | 124 ++++++++++++++
 4 files changed, 420 insertions(+), 22 deletions(-)
 create mode 100644 12-Vue框架/03-CSS模块化设计.md

diff --git a/06-前端基础/09-算法问题.md b/06-前端基础/09-算法问题.md
index 8d88925..c4c9a50 100644
--- a/06-前端基础/09-算法问题.md
+++ b/06-前端基础/09-算法问题.md
@@ -102,10 +102,3 @@
 
 
 
-
-
-
-
-
-
-
diff --git a/10-Node.js/01-Node.js入门.md b/10-Node.js/01-Node.js入门.md
index 6679267..f717e1c 100644
--- a/10-Node.js/01-Node.js入门.md
+++ b/10-Node.js/01-Node.js入门.md
@@ -238,6 +238,14 @@ proxy
 
 ### NVM 的常用命令
 
+
+查看本地安装的所有的 node 版本：
+
+```
+nvm list|ls
+```
+
+
 安装指定版本的node：
 
 ```
@@ -266,12 +274,6 @@ nvm -v
 nvm --version
 ```
 
-查看本地安装的所有的 node 版本：
-
-```
-nvm list|ls
-```
-
 ### Node 的常用命令
 
 查看 node 的版本：
@@ -423,7 +425,7 @@ nrm use taobao  // 使用淘宝的镜像
 ![](http://img.smyhvae.com/20180302_1215.png)
 
 
-推荐的国内加速镜像：<https://npm.taobao.org/>
+推荐的国内加速镜像淘宝：<https://npm.taobao.org/>
 
 
 ## Node 的使用
@@ -489,7 +491,7 @@ PS：NVM 现在已经不支持 Homebrew 的方式来安装了。
 参考链接：<https://www.jianshu.com/p/a3f8778bc0a1>
 
 
-### Mac 下安装 Node
+### Mac 下安装 Node（通过nvm安装）
 
 和Windows下一样，也是执行如下命令：
 
@@ -504,19 +506,18 @@ nvm install 6.0.0
 
 输入 `node -v`，查看当前使用的 node 版本。
 
-npm 也会自动安装的，输入 `npm -v`，查看 npm 的版本。
+安装好 `Node` 之后，`npm` 也会自动安装的，输入 `npm -v`，查看 npm 的版本。
 
 
 ### 安装cnpm
 
-安装cnpm替换npm（npm由于源服务器在国外，下载node包速度较慢，cnpm使用国内镜像）：
+安装`cnpm`替换npm（npm由于源服务器在国外，下载node包速度较慢，cnpm使用国内镜像）：
 
 ```bash
 npm install -g cnpm --registry=https://registry.npm.taobao.org
 ```
 
 
-
 20180302_2204.png
 
 
diff --git a/12-Vue框架/02-项目介绍.md b/12-Vue框架/02-项目介绍.md
index 460f045..8e390fd 100644
--- a/12-Vue框架/02-项目介绍.md
+++ b/12-Vue框架/02-项目介绍.md
@@ -1,7 +1,287 @@
-## 项目介绍.md
-
-评论：印象最深的就是模块化设计，自适应方案，SPA设计的讲解以及webpack如何自己构建的方法和思想。
 
 
-自适应方案设计和CSS模块化绝对是特色内容
+## 前言
+
+
+
+>印象最深的就是模块化设计，自适应方案，SPA设计的讲解以及webpack如何自己构建的方法和思想。
+
+
+> 自适应方案设计和CSS模块化绝对是特色内容。
+
+### 组件化的现状
+
+- 组件化缺乏**方法论**。组件化没有严格的定义。虽然大家都在用框架，但什么情况下定义一个组件，什么情况下不定义一个组件，缺乏方法论。
+
+- 组件化的**设计**不合理。组件划分过细，组件数量很庞大；组件数量少，导致项目的**抽象设计和复用性设计**达不到理想的效果。
+
+- 组件化的**战斗力**体现不足。我们开发的目的是：让开发的敏捷度更高、开发效率更高、复用性设计、业务开发的组合能力更强，给团队带来更大的战斗力。如果组件化的设计不合理，就...
+
+
+
+### 本项目特色
+
+- 组件化的思维方式及项目设计
+
+- **组件化和模块化**不仅仅是 js，也包括 css。
+
+- 如何将项目作出两点，面试又如何表现
+
+- 学会独立构建一个项目，做到独当一面
+
+
+### 本项目内容
+
+- 业务开发流程回顾
+
+- 技术选型分析
+
+
+- 工程构件安装
+
+- 项目设计及原理分析
+
+### 开发模块
+
+- 首页开发
+
+- 理财开发
+
+- 白条开发
+
+- 众筹开发
+
+- 专题页开发（活动专题）
+
+- 构建工具
+
+
+
+### 项目收益
+
+- 掌握CSS模块化技术及模块化设计
+
+- 组件化的概念并不陌生，如何在一个复杂的项目中把组件化设计的灵活才重要
+
+- 学习项目和vue的相关用法
+
+- 学习前端项目的自动化构建
+
+
+## 项目的开发环境及版本
+
+> 前端行业里，最常用的技术栈是：vue/react + Webpack + ES6 + CSS3 + 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>
+
+
+### 相关基础知识
+
+
+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
+```
+
+目的是：通过浏览器访问当前的页面：
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
diff --git a/12-Vue框架/03-CSS模块化设计.md b/12-Vue框架/03-CSS模块化设计.md
new file mode 100644
index 0000000..04c676e
--- /dev/null
+++ b/12-Vue框架/03-CSS模块化设计.md
@@ -0,0 +1,124 @@
+
+
+## 项目设计与原理分析
+
+包括以下内容：
+
+
+- CSS模块化设计
+
+- JS组件设计
+
+- 自适应
+
+- SPA设计
+
+- 构建设计
+
+- 上线指导
+
+
+
+本文先讲CSS模块化设计。
+
+## CSS模块化设计
+
+1、**设计原则**：
+
+- 可**复用**、能**继承**、要完整。
+
+- 周期性迭代
+
+
+2、**设计方法**：
+
+- 先整体后部分，再颗粒化。
+
+
+20180308_1603.png
+
+上图中，整体指的是“布局”。
+
+
+- **先抽象再具体**。
+
+
+
+20180308_1615.png
+
+上图中，先看整体的布局，有哪些版块；具体的版块中，有横向列表、纵向列表；最后再是功能。
+
+
+**总结：**
+
+
+20180308_1620.png
+
+三个模块：
+
+- `reset.css`：不同的浏览器有默认的样式，我们要去掉。
+
+- `layout.css`：布局层面。属于抽象部分。
+
+- `element.css`：功能层面（比如列表、按钮）
+
+
+
+如果你想给两个组件，采用相同的名称，但是样式不同，这个时候就要用到 module。
+
+通过 global和scope的方式，我们就实现了模块的**复用、继承、私有化**。
+
+
+
+## JS组件设计
+
+
+1、**设计原则**：
+
+- **a、高内聚低耦合**。
+
+高内聚：模块功能的专一性高，独立性强。低耦合：是模块之间的联系尽量少，尽量简单。
+
+高内聚：尽量让组件的功能受控于组件本身，而不是依赖于其他的组件。
+
+低耦合：两个模块相同的功能，提取成一个公共的**抽象组件**，但这两个模块没有任何耦合的关系。
+
+
+- b、周期性迭代
+
+需要不断迭代，才能知道什么样的组件最符合自己的业务场景。
+
+
+
+2、**设计方法**：
+
+- 先整体后部分再颗粒化。
+
+
+写抽象的组件，然后继承抽象的组件，达到颗粒化。
+
+
+- 尽可能的抽象。
+
+
+
+
+## 自适应方案设计
+
+如何用一套代码，让一份设计稿，在不同的浏览器上有相同的体验。
+
+
+###
+
+
+
+
+
+
+
+
+
+
+
+
+