Webcourse/22-Vue框架-组件化思维/01-项目介绍.md
2018-03-21 21:45:10 +08:00

301 lines
5.4 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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