myronmai / vue-construct Goto Github PK

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

1. koa模拟数据接口，从而使前后端分离。
2. sourcemap，很好定位。
3. eslint，高大上的代码规则。
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。

npm run mock

npm run watch

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

components: npm run build:components

componentsBase: npm run build:componentsBase

npm run test:unit

npm run dev npm run test:e2e

npm run analyze

npm run prod