前言
关于这个项目的本质
是一个以Element Plus为UI组件库的二次开发，依赖Vue.js
期望的使用方法
// 页面引入和使用
import { ComponentTab } from 'just-vue-tab'
const config = {
displayCurrentClose: 'hover', // 当前tab的关闭按钮的显示
displayBackgroundClose: 'none', // 非当前tab的关闭按钮的显示
// 菜单
toolMenu: {
position: 'right',
closeAll: false,
closeLeft: { text: '关闭左边' },
// 新建标签页的配置
addTab: {
btnText: '新建',
default: '/good/create',
},
},
contextMenu: true, // 右键菜单
// 每次默认打开的页面
defaultTabs: [
{
title: 'Home',
route: '/',
ableClose: false
}
],
// 样式
theme: {
tabRadius: 4, // tab圆角
tabBorderColor: '#ccc', // tab边框颜色
tabCurrentIcon: { color: '#777' }, // 当前tab的指示
},
// 新建标签页
onAdd: (addConfig) => {
component: () => import('@/views/Good/Item'),
keepAlive: true,
}
}
<!--template中的使用-->
<ComponentTab :config={config} />
// 比较少见地当做整个项目的路由标签来使用
import { RouterTab } from 'just-vue-tab'
// 在vue-router中的配置
{
name: 'goodList',
path: '/good',
component: () => import('@/views/Good/index'),
meta: {
keepAlive: true,
},
children: [
{
name: 'goodItem',
path: ':id',
component: () => import('@/views/Good/Item'),
}
]
}
思考
本项目的应用场景：
- 可编辑的多标签页表单
- 应该不太存在的路由标签页。一般来说这种组件都在项目框架里集成了，如果不太满意更建议修改原框架。自定义样式在框架里也有配置方法，不需要因为这个而使用外部组件。可能并不会实现，先作为一个扩展项考虑。
其实我一开始的想法就是路由标签页，突然发现搞错了。
接下来还是继续开发。
集成配置
保证node的使用
由于typescript自身的机制，需要一份xx.d.ts声明文件，来说明模块对外公开的方法和属性的类型以及内容。
对于内建模块，安装一个@types/node模块可以整体解决模块的声明文件问题。
执行以下代码，就可以获得有关node.js的API的类型说明文件。之后，就可以顺利的导入需要的模块了。
pnpm i @types/node --save-dev
tsconfig还没学先不改了
修改一下vite.config.ts
export default defineConfig({
plugins: [vue()],
resolve: {
// 路径别名, 用@表示/src
alias: {
'@': path.resolve(__dirname, 'src')
}
},
server: {
port: 8080, // 项目启动端口
// 配置热更新
hmr: {
host: '127.0.0.1',
port: 8080,
}
}
})
本项目应该用不到代理
代码风格
集成eslint
安装
pnpm i eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
创建配置文件.eslintrc.js
module.exports = {
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module',
ecmaFeatures: {
jsx: true
}
},
extends: [
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
],
rules: {
// override/add rules settings here, such as:
}
};
创建忽略文件.eslintignore
node_modules/
dist/
index.html
修改 package.json
{
...
"scripts": {
...
"eslint:comment": "使用 ESLint 检查并自动修复 src 目录下所有扩展名为 .js 和 .vue 的文件",
"eslint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
}
...
}
集成prettier
安装
pnpm i prettier eslint-config-prettier eslint-plugin-prettier --save-dev
创建配置文件prettier.config.js
module.exports = {
...
// 一行最多 80 字符
printWidth: 80,
...
}
修改.eslintrc.js
module.exports = {
...
extends: [
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'prettier',
'plugin:prettier/recommended'
],
...
};
修改package.json
{
...
"scripts": {
...
"prettier:comment": "自动格式化当前目录下的所有文件",
"prettier": "prettier --write"
}
...
}
UI组件库
集成css, 安装less
pnpm add -D less
规范检查
comittizen
安装
pnpm install -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
添加自定义提示.cz-config.js
husky
# 1.安装
pnpm i husky lint-staged -D
# 2.生成 .husky 的文件夹
npx husky install
# 3.添加 hooks，会在 .husky 目录下生成一个 pre-commit 脚本文件
npx husky add .husky/pre-commit "npx --no-install lint-staged"
# 4.添加 commit-msg
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
# 5. 使用 `git commit -m "message"` 就会看到 hook 生效了。
修改package.json
{
...
"lint-staged": {
"*.{js,ts}": [
"npm run eslint",
"npm run prettier"
]
}
...
}
后记
本文大段配置进行了各种ctrlCV...
本项目需要用到的配置应该基本集成了，接下来要编写代码了。
