一、使用 vite 创建新项目
1. 创建项目空文件夹
2. 执行命令，创建 vite + vue3 项目
npm create vite@latest
# or
pnpm create vite
二、配置 vue-router
1. src 下创建 router/index.js
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: () => import('@/components/test/home.vue'),
},
{
path: '/about',
name: 'About',
component: () => import('@/components/test/about.vue'),
},
]
const router = createRouter({
history: createWebHistory(),
routes,
})
export default router
2. 在 main.js 中引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
三、配置 pinia
1. src 下创建 store/index.js
import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia
2. 在 main.js 中引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import pinia from './store'
const app = createApp(App)
app.use(router)
app.use(pinia)
app.mount('#app')
四、配置 element-plus
1. 安装 element-plus
pnpm i element-plus
2. 在 main.js 中全局注册 element-plus
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import pinia from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './style/style.css' // 自定义全局样式
const app = createApp(App)
app.use(router)
app.use(pinia)
app.use(ElementPlus)
app.mount('#app')
五、重置样式表
1. 安装 normalize.css
pnpm i normalize.css
2. 在 main.js 中引入 normalize.css
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import pinia from './store'
import 'normalize.css' // 引入 normalize.css
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './style/style.css' // 自定义全局样式
const app = createApp(App)
app.use(router)
app.use(pinia)
app.use(ElementPlus)
app.mount('#app')
六、配置 ESLint + prettier
新版 eslint 如下配置
七、配置 husky，自动处理检测代码规范、提交信息
1. 在提交代码，git commit 之前，进行 prettier 操作
pnpm i husky -D
2. 手动初始化 husky，执行如下命令
a. 手动初始化，执行如下命令
npx husky install
b. 安装全部依赖时，会自动初始化
在
package.json注册prepare命令，在项目进行pnpm i后会自动初始化husky
"prepare": "husky install"
3. 创建git hooks，生成 pre-commit 钩子，执行 npm run lint
// 在 git commit 之前，先执行
npx husky add .husky/pre-commit "npm run lint"
在 .husky 目录中生成了一个新的文件
pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm run lint
4. git commit 信息规范
pnpm i commitlint @commitlint/cli @commitlint/config-conventional -D
"commitlint": "^17.4.2" // commitlint 主包
"@commitlint/cli": "^17.4.2", // 规范提交信息
"@commitlint/config-conventional": "^17.4.2", // commitlint 常用的msg配置
5. 根目录添加 .commitlintrc.cjs文件，配置commitlint的配置
module.exports = {
extends: ['@commitlint/config-conventional']
}
6. 创建git hooks，生成.husky/commit-msg
a. 命令行执行如下命令
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
b. 生成如下文件内容
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx --no-install commitlint --edit "$1"
八、lint-staged
1. 只格式化要提交的代码
pnpm i lint-staged -D
2. 在 package.json 中新增
"lint-staged": {
// 只针对如下后缀文件 eslint 格式化修复
"*.{js,jsx,ts,tsx}": [
"eslint --fix",
"prettier --write"
]
}
3. 对 pre-commit 这个钩子进行修改内容
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx --no -- lint-staged
九、vite 相关配置
1. 自动导入插件 unplugin-auto-import/vite
pnpm i unplugin-auto-import/vite -D
# or
npm i unplugin-auto-import/vite -D
2. 支持 jsx @vitejs/plugin-vue-jsx
pnpm i @vitejs/plugin-vue-jsx -D
# or
npm i @vitejs/plugin-vue-jsx -D
十、打版工具集成
1. 安装开发依赖
pnpm i select-version-cli -D
# or
npm i standard-version -D
2. 根目录放置 sh 脚本
#!/usr/bin/env sh
set -e
VERSION=`npx select-version-cli`
# read -p "Releasing $VERSION - are you sure? (y/n)" -n 1 -r
# echo # (optional) move to a new line
# if [[ $REPLY =~ ^[Yy]$ ]]
# then
echo "Releasing $VERSION ..."
npx standard-version --release-as "$VERSION"
git push --follow-tags origin main #根据分支自行修改
3. package.json 中配置快捷执行指令
"scripts": {
"release": "sh ./scripts/release.sh",
},
