本文主要分享结构设计，业务代码你我都会，工作日太忙了，抽空写一部分更新一下：
一开始想着用 ts + vue的原因是上个项目里面，由于人员分工流动比较大，风格比较随意，导致项目中后期维护的时候，那个同事找不到地方吐槽了，改代码成本比较高，干脆后面就用 ts。意外收获是vscode中，别名路径@，可以直接ctrl+鼠标点击直接索引到，不用花式秀操作。
简单开始，vue-cli3 初始化文件，另外稍微配置了一下文件结构
- .hooks （.git/hooks/pre-commit 需要用到）
- .vscode （覆盖某些朋友的eslint不规范）
- public
- src
- @types
- definition.d.ts（偷懒神器文件）
- api
- components（全局用的组件，内含兼容性比较高的 [el-admin-table](https://www.npmjs.com/package/el-admin-table) ）
- const （全局需要用到的约定配置）
- directives
- locale
- mixins
- pages
- plugins
- router
- base.ts
- index.ts
- route-append.ts
- store
- modules（各个store内容）
- index.ts
...
- .eslintignore.js
- .eslintrc.js
- .prettierrc.js
- babel.config.js
- postcss.config.js
- route-generator.js （自己写的动态路由规则，比较懒，不想一个一个文件的去录入router.config.js）
- tsconfig.json
- vue.config.js
- watch.js （观测src/下文件增删，动态赋予路由）
- package.json （最重要的当然是它）
贴图从package.json开始，核心是改的scripts，有的人不喜欢去改里面的内容，cli里面是什么样子，项目结束就是什么样子，比我还懒的动手
move:hook 将上面 .hooks里面的一个pre-commit 放进 .git 里面去，在提交的时候慢一点总比提上去代码风格不统一来的方便；
serve:watch 同时一个命令行面板里面启动俩个命令，全是mac 的话其实直接 commadA & commandB 就可以了，兼容一下windows；
build:xxx 各个环境打包；
generate:route 将路由写入到 src/router/route-append.ts 里面去；
lint / lint-fix / prettier 只是一些格式化脚本。
babel.config.js
dynamic-import-webpack 跟 dynamic-import-node 区分一下，web用-webpack 这个就行，在单独引用router的时候，稍大的项目热更新容易比较慢，这个能解决问题。
router-generator.js
这个文件稍微费了点功夫，一开始没想到去找npm的包，就想着自己去监听文件，一不小心没有解除监听，路由就没解析好。辛亏一不小心的发现了 [watch](https://www.npmjs.com/package/watch)，解决了我最后一步的问题。下面是文件命名的规则，其实跟 nuxtjs 或者dva / umi的规则有点类似，但一是我没找到他们的源码，二是我们团队大部分都是vue（手动狗头.gif）
- 例如@/share/about.type.id$.vue 会动态计算到 @/router/route-append.ts 里面，被解析为
{
path: “/about/:type/:id?”,
name: “share-about”, 这里只取文件前面的名字，不取参数
component: () => import("@/share/about.type.vue"),
meta: { …args }
}
动态传参方式，模板是在 ./route-generator.js。（传参数尽量使用这种传参的方式）。 - 路由动态计算会忽略 @/pages/**/component/ 或者 **/const/ 或者 **/style/ 文件夹下的内容。
- 不需要动态计算的路由文件写到base.ts里面去，会自动忽略。
src/router/base.ts
现在通常写web都是 export (default) + import 一把梭，但是这个不兼容node环境~ 所以为了方便，这里用module.exports + require 吧
