vite+vue3+ts从0到1搭建企业级项目（3）https://developer.aliyun.com/article/1540140
9. 集成 element-plus
- 安装
yarn add element-plus
- 按需引入
- 按需引入首先需要安装
unplugin-vue-components和unplugin-auto-import这两款插件
yarn add -D unplugin-vue-components unplugin-auto-import
- 将下列代码插入
vite.config.ts中
// vite.config.ts import { defineConfig } from 'vite' import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' export default defineConfig({ // ... plugins: [ // ... AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], })
- 使用组件
<template> <div> <el-button>Default</el-button> <el-button type="primary">Primary</el-button> <el-button type="success">Success</el-button> <el-button type="info">Info</el-button> <el-button type="warning">Warning</el-button> <el-button type="danger">Danger</el-button> </div> </template>
10. 使用 commitizen 规范git提交代码
- 安装
yarn add -D commitizen cz-conventional-changelog @commitlint/config-conventional @commitlint/cli commitlint-config-cz cz-customizable
- 配置
package.json
{ ... "scripts": { "commit:comment": "引导设置规范化的提交信息", "commit":"git-cz", }, "config": { "commitizen": { "path": "node_modules/cz-customizable" } }, ... }
- 根目录新建
commitlint.config.js配置文件
module.exports = { extends: ['@commitlint/config-conventional', 'cz'], rules: { 'type-enum': [ 2, 'always', [ 'feature', // 新功能（feature） 'bug', // 此项特别针对bug号，用于向测试反馈bug列表的bug修改情况 'fix', // 修补bug 'ui', // 更新 ui 'docs', // 文档（documentation） 'style', // 格式（不影响代码运行的变动） 'perf', // 性能优化 'release', // 发布 'deploy', // 部署 'refactor', // 重构（即不是新增功能，也不是修改bug的代码变动） 'test', // 增加测试 'chore', // 构建过程或辅助工具的变动 'revert', // feat(pencil): add ‘graphiteWidth’ option (撤销之前的commit) 'merge', // 合并分支， 例如： merge（前端页面）： feature-xxxx修改线程地址 'build', // 打包 ], ], // <type> 格式 小写 'type-case': [2, 'always', 'lower-case'], // <type> 不能为空 'type-empty': [2, 'never'], // <scope> 范围不能为空 'scope-empty': [2, 'never'], // <scope> 范围格式 'scope-case': [0], // <subject> 主要 message 不能为空 'subject-empty': [2, 'never'], // <subject> 以什么为结束标志，禁用 'subject-full-stop': [0, 'never'], // <subject> 格式，禁用 'subject-case': [0, 'never'], // <body> 以空行开头 'body-leading-blank': [1, 'always'], 'header-max-length': [0, 'always', 72], }, };
- 自定义提示添加
.cz-config.js
module.exports = { types: [ {value: 'feature', name: 'feature: 增加新功能'}, {value: 'bug', name: 'bug: 测试反馈bug列表中的bug号'}, {value: 'fix', name: 'fix: 修复bug'}, {value: 'ui', name: 'ui: 更新UI'}, {value: 'docs', name: 'docs: 文档变更'}, {value: 'style', name: 'style: 代码格式(不影响代码运行的变动)'}, {value: 'perf', name: 'perf: 性能优化'}, {value: 'refactor', name: 'refactor: 重构(既不是增加feature，也不是修复bug)'}, {value: 'release', name: 'release: 发布'}, {value: 'deploy', name: 'deploy: 部署'}, {value: 'test', name: 'test: 增加测试'}, {value: 'chore', name: 'chore: 构建过程或辅助工具的变动(更改配置文件)'}, {value: 'revert', name: 'revert: 回退'}, {value: 'build', name: 'build: 打包'} ], // override the messages, defaults are as follows messages: { type: '请选择提交类型:', customScope: '请输入您修改的范围(可选):', subject: '请简要描述提交 message (必填):', body: '请输入详细描述(可选，待优化去除，跳过即可):', footer: '请输入要关闭的issue(待优化去除，跳过即可):', confirmCommit: '确认使用以上信息提交？(y/n/e/h)' }, allowCustomScopes: true, skipQuestions: ['body', 'footer'], subjectLimit: 72 };
- 使用
- 添加至暂存区
git add .
- 选择提交类型
yarn commit
-
- 提交
最后
到这里一个基本的vite+vue3+ts的项目就搭建完成啦
