Webcourse/22-Vue框架-组件化思维/01-项目介绍.md

## 前言



>印象最深的就是模块化设计，自适应方案，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