一个用于生成自定义模板的 Vue CLI 4.x preset，包含了创建项目时所需的选项和插件，以及自定义的模板文件，所预设的插件和配置有：Less、Axios、Router、Vuex、StyleLint、Eslint、Babel。
模板存放在
/generator/template，创建项目时自动生成，如果要调整模板需注意：空文件和文件夹会被忽略，模板要考虑文件名的边界情况，以点开头的模板需要使用下划线取代那个点，以下划线开头的文件需要使用两个下划线来取代单个下划线。
$ vue create --preset CDTRSFE/vue-preset <app-name>- Vue 版本选择
创建过程中会有选择提示，可以选择 Vue 版本，默认是 2.x。如果需要使用 Vue3，先升级 Vue CLI 至 v4.5 及以上版本。
? Choose a version of Vue.js (Use arrow keys)
❯ 2.x
3.x- 项目类型选择
选择 data visualization project 可创建数据可视化大屏项目，会在 default project 基础之上额外安装 echarts animate.css。
? What type of project do you want to create? (Use arrow keys)
❯ default project
data visualization project- UI 组件库选择
还可以选择需要使用的 UI 组件库，数据可视化大屏项目不会出现此提示。
? Choice a UI Framework (Use arrow keys)
❯ none
Element UI创建完成后目录结构：
.
├── public
├── src
│ ├── App.vue
│ ├── assets
│ │ └── styles
│ │ ├── public.less # 公共样式
│ │ └── resources.less # 全局变量等
│ ├── components
│ │ ├── common # 全局公用组件
│ │ ├── index.js
│ │ └── normal # 公用组件
│ ├── main.js
│ ├── plugins
│ │ ├── axios.js # Axios
│ │ ├── directives.js # 全局指令
│ │ └── filters.js # 全局过滤器
│ ├── router
│ └── store
├── stylelint.config.js # stylelint 配置
├── README.md
├── .eslintrc.js # ESLint 配置
├── Version.ReadMe.md # 版本日志
├── babel.config.js
├── package-lock.json
├── package.json
└── vue.config.js
public/styles 目录下放了两个 CSS 文件，一个是样式重置，一个是高频率使用的一些 class，在 public/index.html 文件中引入。
样式重置和高频率使用的 class，这两部分公共样式文件从模板中提取出来，放在 tp-common.css 里单独维护。如果项目里需要用到全局样式，都放在 src/assets/styles/public.less 中，此文件在 main.js 引入。
项目采用 Less 作为 CSS 预处理器，src/assets/styles/ 目录下放了一个 resources.less 文件，用于存放一些全局的变量或 mixin 等。此文件自动导入到每个单文件组件和 Less 文件里。
在 vue.config.js 中已配置 style-resources-loader，无需再使用 vue add style-resources-loader 安装 vue-cli-plugin-style-resources-loader 了。
iconfont 和其他字体文件都放在 public 文件夹下，在 public/index.html 引入对应的 CSS / js 文件。建议在 public/iconfont/info.md 文件中记录图标库的地址和管理员账号，方便后续维护。
.
├── font
│ ├── f.ttf
│ └── font.css
└── iconfont
├── f.ttf
└── iconfont.css
<!-- index.html -->
<head>
<link rel="stylesheet" href="<%= BASE_URL %>iconfont/iconfont.css" />
<link rel="stylesheet" href="<%= BASE_URL %>font/font.css" />
</head>公用组件放在 src/components/ 下，common/ 目录存放全局公用组件，为了方便自动全局注册，以及考虑到复杂组件需要拆分成多个文件的情况，每个全局组件都放在单独的文件夹里，并至少包含一个 Index.vue 作为入口。其他公用组件放在 normal/ 里，使用时引入。
指令放在 src/plugins/directives.js 里，过滤器放在 src/plugins/filters.js 里，都是自动全局注册。
为了避免 store 对象变得臃肿，根据业务把 store 拆分成带命名空间的模块，所有模块放在 src/store/modules/ 下，实例化 vuex 之前自动导入 modules 下的所有模块，并开启热更新。
所有自定义规则都放在了 eslint-config-tpconfig 里单独维护，创建项目后自动生成的 .eslintrc.js 文件里不再有 rules。在编辑器中，建议安装 Eslint 插件，并开启保存时自动修复。
// vscode settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}所有自定义规则都放在了stylelint-config-tpconfig 里单独维护，创建项目后自动生成的 stylelint.config.js 文件里不再有 rules 。在编辑器中，建议安装 stylelint 插件。并开启保存时自动修复。
// vscode settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
}
}- 自动生成版本日志
- pre-commit 代码校验
- commit message 格式校验
为了方便生成版本日志，提交代码时输入的 message 需要按照一定的格式，如
feat(blog): add comment section，可以使用git cz代替git commit生成符合规范的 message。
使用了 transform-remove-debugger 和 transform-remove-console，生产环境代码删除 debugger 和 console。