项目地址:
https://gitee.com/nifeng6/vue-ui-template
使用vite创建vue-ts项目
执行命令创建你的项目
pnpm create vite nf-ui --template vue-ts
创建后,进入项目目录执行pnpm i
安装模块
接着修改vite.config.ts内容,添加以下代码
server: {
host: "localhost",
port: 3000,
open: true,
},
创建packages文件
这里遵循 Monorepo 模式,先提前将可能用到的内容模块化a
PS:目前先不创建以下文件夹,稍后会使用lerna创建
创建你的工作空间
根目录下创建 pnpm-workspace.yaml 文件,插入以下代码
packages:
- 'packages/**'
- 'src/**'
安装&使用eslint + prettier
执行以下代码安装依赖
pnpm add -w eslint prettier eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier -D
接着,在package.json文件中的添加以下执行脚本
scripts: {
"lint:create": "eslint --init"
}
执行脚本,步骤如下
因为我们使用了工作空间,执行上方的一键脚本可能有些问题,可以在执行以下命令安装脚本
(PS: 如果你在这一步没有报错,或者你没有使用工作空间,可以跳过以下的这一段代码)
pnpm add -w eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest -D
安装一部分ts、起别名等可能缺少的依赖
pnpm install eslint-import-resolver-alias @types/eslint @types/node -D
修改目录下的 .eslintrc.cjs 文件
module.exports = {
root: true,
env: {
browser: true,
node: true,
es6: true,
},
plugins: ['vue', '@typescript-eslint'],
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 13,
parser: '@typescript-eslint/parser',
sourceType: 'module',
ecmaFeatures: {
jsx: true,
tsx: true,
},
},
settings: {
'import/resolver': {},
},
extends: [
'airbnb-base',
'eslint:recommended',
'plugin:vue/vue3-strongly-recommended',
// 解决 prettier 冲突
'prettier',
],
globals: {
defineProps: 'readonly',
defineEmits: 'readonly',
defineExpose: 'readonly',
withDefaults: 'readonly',
},
rules: {
// 禁止使用多余的包
'import/no-extraneous-dependencies': 0,
'no-param-reassign': 0,
},
}
在package.json中添加以下脚本
scripts: {
"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --max-warnings 0 --cache",
"lint:fix": "pnpm run lint --fix",
"format": "prettier --write --cache ."
}
执行,pnpm run lint:fix 可知自己的报错并修复代码
安装 lint-staged&husky
执行以下代码
pnpm add -w lint-staged husky -D
package.json添加以下脚本
scripts: {
"prepare": "husky install",
}
初始化git: git init
接着执行上方脚本,初始化husky
在.husky文件夹中,新建pre-commit文件,写入以下代码:
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged --allow-empty
package.json根节点中添加以下内容
"lint-staged": {
"*.{js,ts,tsx,vue,json}": [
"prettier --write"
],
"*.{js,ts,tsx,vue}": [
"eslint --fix"
]
},
安装commitlint
pnpm add -w @commitlint/config-conventional @commitlint/cli -D
根目录下创建 commitlint.config.cjs 文件
/*
"off"或者0:关闭规则 "warn"或1:开启规则抛出警告 "error"或2:开启规则抛出错误
*/
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'body-leading-blank': [2, 'always'], // body上面有换行
'footer-leading-blank': [1, 'always'], // footer上面有换行
'header-max-length': [2, 'always', 108], // header上最大108字符
'type-case': [0],
'type-empty': [0],
'scope-empty': [0],
'scope-case': [0],
'subject-full-stop': [0, 'never'],
'subject-case': [0, 'never'],
'type-enum': [
2,
'always',
[
'feat', // 新增功能、页面
'fix', // 修补bug
'docs', // 修改文档、注释
'style', // 格式:不影响代码运行的变动、空格、格式化等等
'ui', // ui修改:布局、css样式等等
'hotfix', // 修复线上紧急bug
'build', // 改变构建流程,新增依赖库、工具等(例如:修改webpack)
'refactor', // 代码重构,未新增任何功能和修复任何bug
'revert', // 回滚到上一个版本
'perf', // 优化:提升性能、用户体验等
'ci', // 对CI/CD配置文件和脚本的更改
'chore', // 其他不修改src或测试文件的更改
'test', // 测试用例:包括单元测试、集成测试
'update' // 更新:普通更新
]
]
}
}
在husky文件夹中创建commit-msg 文件
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx --no -- commitlint --edit
这步结束,我们就可以试着提交我们的代码了,可知,在没有带前缀规范的格式下,是无法提交的
但,我们不可能每次都手写commit 前缀,这是浪费时间的
安装 git-cz,省略手动写提交前缀
npm install -g git-cz commitizen
pnpm add -w git-cz -D
配置( package.json )
{
"config": {
"commitizen": {
"path": "git-cz"
}
}
}
配置 script( package.json )
{
"scripts": {
"commit": "git-cz"
}
}
在根目录中添加changelog.config.cjs
'use strict';
module.exports = {
types: [
{ value: 'feat', name: '新增:新增功能、页面' },
{ value: 'fix', name: 'bug:修复某个bug' },
{ value: 'docs', name: '文档:修改增加文档、注释' },
{ value: 'style', name: '格式:不影响代码运行的变动、空格、格式化等等' },
{ value: 'ui', name: 'ui修改:布局、css样式等等' },
{ value: 'hotfix', name: 'bug:修复线上紧急bug' },
{ value: 'build', name: '测试:添加一个测试' },
{ value: 'refactor', name: '重构:代码重构,未新增任何功能和修复任何bug' },
{ value: 'revert', name: '回滚:代码回退到某个版本节点' },
{ value: 'perf', name: '优化:提升性能、用户体验等' },
{ value: 'ci', name: '自动化构建:对CI/CD配置文件和脚本的更改' },
{ value: 'chore', name: '其他修改:不修改src目录或测试文件的修改' },
{ value: 'test', name: '测试:包括单元测试、集成测试' },
{ value: 'update', name: '更新:普通更新' },
],
// 交互提示信息
messages: {
type: '选择一种你的提交类型:',
scope: '选择一个影响范围(可选):',
customScope: '表示此更改的范围:',
subject: '短说明:\n',
body: '长说明,使用"|"符号换行(可选):\n',
breaking: '非兼容性说明(可选):\n',
footer: '关闭的issue,例如:#31, #34(可选):\n',
confirmCommit: '确定提交说明?(yes/no)',
},
allowCustomScopes: true,
// 设置选择了那些type,才询问 breaking message
allowBreakingChanges: ['feat', 'fix', 'ui', 'hotfix', 'update', 'perf'],
subjectLimit: 100,
};
接着执行脚本,这就很舒服了
安装lerna
这里推荐全局安装,项目内安装也行
npm i lerna -g
安装后,在项目内初始化lerna
lerna init
这步结束会在根目录下创建一个lerna.json的文件,我们将下面的内容添加进这个文件中
"packages": [
"packages/*"
],
步骤阶段总结
完成上面的步骤,就完成了初步的初始化了,现在将项目进行整理,就目前来说,我们的项目结构如下
将网站(文档站点)移入packages中
先进入packages文件夹中,执行lerna初始化,lerna create site
,为了规范,这里我将packages下的包名统一以我的ui组件开头命名 @nfui/**, 你们也可以选择你们自己喜欢的名字
接着,我们需要将根目录以下的文件,移入一份到site文件夹中
vue.config.ts、
vite.config.ts、
tsconfig.json、
index.html、
tsconfig.node.json、
src文件夹
public文件夹
在site目录中的package.json中增加运行脚本
"scripts": {
"dev": "vite",
}
根目录的运行脚本同步修改
"scripts": {
"dev": "pnpm -C packages/site dev",
}
以上脚本见名知意,我就不解释了
做完这步,我们在根目录运行脚本命令试试结果pnpm dev
一切正常就代表以上的步骤都是成功的
创建组件目录
同样使用lerna创建组件目录,lerna create components,这里我同样统一前缀,@nfui/components
接下来就不手打了,你们看的也累,我打字也累,按照以下格式创建指定文件
创建按需引入文件components/button/index.ts增加以下内容
import { App } from "vue";
import NfButton from "./src/button.vue";
NfButton.install = (app: App) => {
app.component(NfButton.name, NfButton);
};
export default NfButton;
创建统一引入文件components/index.ts
import { App } from "vue";
import Button from "./button/src/button.vue";
const components = [Button];
const install = (app: App) => {
components.forEach((component) => {
app.component(component.name, component);
});
};
export default { install };
这步结束,我们的初始化搭建就接近尾声了,开始我们修改的测试
文档引入组件测试
进入文档网站目录,在package.json中引入依赖
"@nfui/components": "^0.0.0"
在src/main.ts中增加引入,如下
接下来就和一般组件库一样,就能在网站中欢乐的使用了
初始化准备差不多就到此结束了,接下来就是组件和样式编写了,后续内容可能也会继续编写,源码在最上方分享在gitee了,如需要的话可以自取