Skip to content

Latest commit

 

History

History
164 lines (119 loc) · 7.05 KB

README.md

File metadata and controls

164 lines (119 loc) · 7.05 KB
Raw

vue-preset

一个用于生成自定义模板的 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 里，都是自动全局注册。

Vuex

为了避免 store 对象变得臃肿，根据业务把 store 拆分成带命名空间的模块，所有模块放在 src/store/modules/ 下，实例化 vuex 之前自动导入 modules 下的所有模块，并开启热更新。

ESLint

所有自定义规则都放在了 eslint-config-tpconfig 里单独维护，创建项目后自动生成的 .eslintrc.js 文件里不再有 rules。在编辑器中，建议安装 Eslint 插件，并开启保存时自动修复。

// vscode settings.json
{
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
}

stylelint

所有自定义规则都放在了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。

Babel

使用了 transform-remove-debugger 和 transform-remove-console，生产环境代码删除 debugger 和 console。

相关链接