Vue前端架构

想想也做过不少不同架构的项目，有Vue，有React，有ThinkPHP，有Laravel。 这是本王总结了很多项目下来的经验做的前端项目架构。

主要工具介绍

工具名 | 作用 ----------------------- | ------ vue v2.5 | data binding vue-router v3 | vue路由 webpack v4 | 本地发开、打包发布 webpack-dev-server v3 | 本地启mock服务 webpack-bundle-analyzer | 打包后文件分析 koa v2 | 本地模拟数据接口 axios | 处理get/post mockjs | 制造模拟数据 nodemon | 修改node代码不需要重启监听，一直运行就好

功能介绍

开发

1. koa模拟数据接口，从而使前后端分离。
2. sourcemap，很好定位。
3. eslint，stylelint高大上的代码规则。
4. 热替换。
5. nodemon让改node代码变得更加顺滑。
6. 使用mockjs模拟接口返回数据。
7. scss支持识别2倍3倍图加载（除了接口获取的图，所有图都用背景图方案）
8. git hooks，防止不符合规范的提交

测试

1. 单元测试（含代码覆盖率）
2. e2e测试

发布

1. 将第三方js库打包成vendor.js，从而使项目业务代码修改也不会影响基本稳定的三方js代码，充分利用浏览器缓存。
2. 将css代码分为两份，一份为基础代码，即上线后几乎不变，另一份为迭代代码，从而充分利用浏览器缓存。
3. 发布以后的所有文件会加md5后缀，从而充分利用浏览器缓存。
4. tree shaking。
5. dynamic import，代码不会打包到一个js文件里，而会分成n个按需加载js。

使用方法

开发

1.模拟数据

npm run mock

2.页面开发

npm run watch

3.一起启动

npm run dev 启动以后，可以在运行时，管理已配置的接口根据我们想要的状态，对统一地址、统一参数的接口返回不同数据。 管理接口地址：{host:port}/mock-switch/

4.文档本地预览

components: npm run build:components

componentsBase: npm run build:componentsBase

测试

1.单元测试

npm run test:unit

2.e2e测试

npm run dev npm run test:e2e

代码大小分析

npm run analyze

发布

npm run prod