Day-04 从 0 开始搭建一套规范的 Vue3.x 项目工程环境

九、集成 UI 框架 Element Plus

1.安装

npm install view-ui-plus --save

 2.按需引用

借助插件 babel-plugin-import 可以实现按需加载组件，减少文件体积。首先安装，并在文件 .babelrc 或者在 webpack babel-loader 中配置：

npm install babel-plugin-import --save-dev
 
// .babelrc or babel-loader
{
  "plugins": [
    [
      "import",
      {
        "libraryName": "view-ui-plus",
        "libraryDirectory": "src/components"
      },
      "view-ui-plus"
    ]
  ]
}

  3.main.ts 中注册使用

import { Button, Table } from 'view-ui-plus';
app.component('Button', Button);
app.component('Table', Table);
 
const root = createApp(App);
root.component('Button', Button);
root.mount('#app')

九、提交规范

提交代码的说明同样进行了规范限制，采用 commitizen 提交规范，commitizen 需要进行单独安装，安装步骤如下:

当然，也可以熟记 commitizen提交规范，在提交代码时手动输入符合规范的提交信息。

1.安装 commitizen

npm install -D commitizen

安装完成后，用 git cz 代替 git commit 提交代码

2.提交时按提示填写信息

git add .
git cz

使用 commitizen 可以很好地规范化 Vue3 项目的提交信息。