Typecript + Vue 自定义配置项目实践

Typecript + Vue 自定义配置项目实践
0

本文主要分享结构设计,业务代码你我都会,工作日太忙了,抽空写一部分更新一下:


一开始想着用 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)
  1. 例如@/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。(传参数尽量使用这种传参的方式)。
  2. 路由动态计算会忽略 @/pages/**/component/ 或者 **/const/ 或者 **/style/ 文件夹下的内容。
  3. 不需要动态计算的路由文件写到base.ts里面去,会自动忽略。

src/router/base.ts

现在通常写web都是 export (default) + import 一把梭,但是这个不兼容node环境~ 所以为了方便,这里用module.exports + require 吧

3赞

:clap::clap: 期待完成这篇文章吖

@Chengjun.L

这个不太懂,可以详细说一下吗?谢谢!

常用的vue开发中,@/plugins 这种别名路径,ctrl +鼠标左键点击不能索引到,typescript 开发可以,很方便追踪变量引入