一、创建一个Vue项目
在命令提示符里输入: pnpm create vite
依次输入项目名，选择Vue、TypeScript
这样一个简单的Vue+TS项目就创建好啦，切换到对应文件继续或者直接用vscode打开。新建一个终端，输入pnpm i初始化，即可在浏览器看到页面效果。 开始 | Vite 官方中文文档 (vitejs.dev)
二、Eslint
- 采用antfu大佬的eslint配置，在终端中输入如下命令下载
pnpm add -D eslint @antfu/eslint-config
- 新建一个
.eslintrc文件，在里面添加
{
"extends": "@antfu"
}
- 在package.json中添加以下脚本命令
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
}
}
- "lint"：该命令用于运行 ESLint 对整个项目进行代码检查，但不会自动修复错误。
- "lint:fix"：该命令在运行 ESLint 对整个项目进行代码检查的基础上，还会尝试自动修复一些可修复的代码错误。
- 通过定义这些脚本命令，可以方便地在命令行中运行这些命令，以对项目代码进行静态代码分析和修复。例如，可以运行以下命令：
pnpm lint,这将会运行 ESLint 对整个项目进行代码检查，并输出检查结果。 pnpm lint:fix将会运行 ESLint 对整个项目进行代码检查，并尝试自动修复一些可修复的代码错误。
- 在.vscode文件夹添加settings.json文件.
{
"prettier.enable": false,
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
"prettier.enable": false: 这表示禁用了 Prettier 的格式化功能。Prettier 是一个代码格式化工具，用于自动格式化代码以保持一致的风格。通过将其设置为 false，表示不希望在保存文件时自动应用 Prettier 的格式化规则。"editor.formatOnSave": false: 这表示禁用了编辑器在保存文件时自动进行格式化。通常，编辑器可以配置为在保存文件时自动应用代码格式化，以确保代码的一致性和可读性。通过将其设置为 false，表示不希望在保存文件时进行自动格式化。"editor.codeActionsOnSave": { "source.fixAll.eslint": true }: 这个配置指定了在保存文件时自动应用 ESLint 的修复操作。ESLint 是一个用于检测和修复代码问题的工具，通过将上述配置设置为 true，表示希望在保存文件时自动应用 ESLint 的修复操作，以修复代码中的潜在问题。
好了，关于eslint的基本配置到此结束，更多详情参考：antfu/eslint-config: Anthony's ESLint config presets (github.com)。让我们试下效果，在App.vue文件中输入console.log()，立马飘红提示Unexpected console statement，说明设置成功。现在，可以执行pnpm lint检查下代码，输出如下图：
再输入
pnpm lint:fix自动修复一下，可以看到上述不规范的地方已经修复。
已有的tsconfig.json文件其他配置项说明：
"target": "ES2020"：指定编译后的 JavaScript 代码的目标版本为 ES2020。"useDefineForClassFields": true：启用对类字段定义的新语法的支持。"module": "ESNext"：指定模块系统的类型为 ESNext，即使用最新的模块语法。"lib": ["ES2020", "DOM", "DOM.Iterable"]：指定要包含在编译过程中的库文件。这里包括 ES2020、DOM 和 DOM.Iterable。"skipLibCheck": true：跳过对声明文件的类型检查，可以提高编译速度。"moduleResolution": "bundler"：指定模块解析策略为 bundler 模式，即使用打包工具进行模块解析。"allowImportingTsExtensions": true：允许导入 TypeScript 文件时省略文件扩展名。"resolveJsonModule": true：允许导入 JSON 文件作为模块。"isolatedModules": true：将每个文件视为独立的模块，这样可以提供更好的编辑器支持。"noEmit": true：不生成任何编译输出文件。"jsx": "preserve"：将 JSX 代码保留为原样，不进行转换。
下面是与代码质量相关的选项：
"strict": true：开启严格模式，包括所有的严格类型检查选项。"noUnusedLocals": true：禁止未使用的局部变量。"noUnusedParameters": true：禁止未使用的函数参数。"noFallthroughCasesInSwitch": true：在 switch 语句中禁止 case 之间的穿透（不使用 break）。
三、Vite配置
- 安装
@types/node以实现在TypeScript 项目中使用 Node.js 的 API 和功能时获得正确的类型提示和类型检查支持
pnpm add @types/node -D
- 相对文件路径配置，在vite.config.ts文件中添加如下代码
import path from 'node:path'
export default defineConfig({
plugins: [vue()],
resolve: {
// 配置别名
alias: {
'~/': `${path.resolve(__dirname, 'src')}/`,
'@/': `${path.resolve(__dirname, 'src')}/`,
},
},
})
- tsconfig.json文件中的compilerOptions里添加添加如下配置
// Begin
"baseUrl": ".",
"paths": {
"~/*": ["src/*"],
"@/*": ["src/*"]
}
现在就可以使用@/和~/开头引入src里的文件了，如:
<script setup lang="ts">
import HelloWorld from '~/components/HelloWorld.vue'
</script>
- server配置(与resolve同级)
server: {
// 可以以IP访问
host: true,
// 端口
port: 8080,
// 自动打开游览器
open: true,
// 允许跨域
cors: true,
proxy: {
// 这里配置真实的后端环境地址
'/v2/api': {
target: 'https://hhh/v2/api',
changeOrigin: true,
rewrite: (path: string) => path.replace(/^\/v2\/api/, ''),
},
},
},
- bulid配置(与resolve同级)
build: {
sourcemap: false,
// 使用 Terser 压缩工具进行代码压缩
minify: 'terser',
terserOptions: {
compress: {
// 生产环境时移除console.log()
drop_console: true,
drop_debugger: true,
},
},
},
四、Unocss的使用
作为antfu大佬的杰出之作，体验感超棒！一起跟着来尝试一下吧
- 添加对应的包
pnpm install unocss -D
- 在vite.config.ts文件中引入
import UnoCSS from 'unocss/vite'
- 在main.ts中引入uno.css
import 'uno.css'
- 会发现在main.ts文件中有飘红提示，在vite-env.d.ts中输入下列代码即可
// 解决Vue引入TS报错
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
- 新建一个
uno.config.ts文件用以配置Unocss，内容参考如下
import {
defineConfig,
presetAttributify,
presetIcons,
presetTypography,
presetUno,
presetWebFonts,
transformerDirectives,
transformerVariantGroup,
} from 'unocss'
export default defineConfig({
// gray-200 dark:gray-700
shortcuts: {
'bg-base': 'bg-white/0 dark:bg-dark-300',
'bg-base-soft': 'bg-white dark:bg-dark-100',
'border-base': 'border-gray-200 dark:border-gray-200/50',
'color-base': 'text-gray-700 dark:text-gray-300',
'color-fade': 'text-gray-700:50 dark:text-gray-300:50',
},
presets: [
presetUno(),
presetAttributify(),
presetIcons({
scale: 1.2,
warn: true,
extraProperties: {
'display': 'inline-block',
'vertical-align': 'middle',
},
}),
presetTypography(),
presetWebFonts({
fonts: {
sans: 'DM Sans',
serif: 'DM Serif Display',
mono: 'DM Mono',
},
}),
],
transformers: [
transformerDirectives(),
transformerVariantGroup(),
],
safelist: 'prose prose-sm m-auto text-left'.split(' '),
})
defineConfig: 这是 Unocss 的配置函数，用于创建配置对象。shortcuts: 这里定义了一些快捷样式，可以使用类似bg-base、border-base等类名来应用这些样式。presets: 这是 Unocss 预设的一些样式集合，可以根据需要启用不同的预设。示例中启用了presetUno、presetAttributify、presetIcons、presetTypography和presetWebFonts。transformers: 这是 Unocss 的转换器，用于处理指令和变体的转换。示例中启用了transformerDirectives和transformerVariantGroup。safelist: 这里列出了一些类名，确保它们不被 PurgeCSS 所移除，即保留它们在最终生成的 CSS 文件中。- 其他部分包括一些具体的配置项，如颜色、字体等。
- 添加图标库，我选择的是material-symbols，Icônes (icones.js.org)
pnpm i -D @iconify-json/material-symbols
至此便可以愉快地使用unocss啦,例如我们为vite+Vue添加hover效果并使用图标
<h1 class="hover:bg-#34fda3aa">
{{ msg }}
<div class="i-material-symbols:air-rounded color-blue" />
</h1>
五、Element-plus引入
- 下载自动按需加载的包
pnpm install unplugin-auto-import unplugin-vue-components -D
unplugin-auto-import是一个用于自动导入模块的插件，可以根据代码中的模块引用自动添加相应的导入语句，减少手动导入的工作量。unplugin-vue-components是一个用于自动注册 Vue 组件的插件，可以根据文件目录结构自动注册组件，无需手动编写注册代码。
- 安装element-plus
pnpm install element-plus
- 在vite.config.ts文件中添加如下代码，同时实现Vue的按需加载
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
plugins: [
vue(),
UnoCSS(),
AutoImport({
// 生成类型声明文件路径，设为 false 可禁止生成文件
dts: './src/auto-imports.d.ts',
imports: ['vue'],
eslintrc: {
// 启用与 Eslint 集成
enabled: true,
// 生成 EsLint 配置文件的路径，在下面 Eslint 配置部分会使用
filepath: './eslintrc-auto-import.json',
// 用于覆盖 globals 属性，
globalsPropValue: true,
},
// 路径解析器列表
resolvers: [ElementPlusResolver()],
}),
Components({
// 生成类型声明文件路径，设为 false 可禁止生成文件
dts: './src/components.d.ts',
// 组件路径解析器列表
resolvers: [ElementPlusResolver()],
}),
],
AutoImport是unplugin-auto-import提供的一个插件配置项，用于自动导入模块。在这里，配置了生成类型声明文件的路径（dts），设置为./src/auto-imports.d.ts，意味着会在该路径下生成类型声明文件。imports数组指定了需要自动导入的模块，这里暂时只指定了vue。eslintrc是用于与 ESLint 集成的配置项。通过设置enabled为true，启用了与 ESLint 的集成。filepath指定了生成的 ESLint 配置文件的路径，这里设置为./eslintrc-auto-import.json。resolvers是路径解析器列表，用于解析模块的导入路径。这里使用了ElementPlusResolver()，它是一个特定于 Element Plus 组件库的路径解析器。- Components 配置项，它是 unplugin-vue-components 提供的插件配置项，用于自动注册 Vue 组件。在这里，设置了生成类型声明文件的路径为 ./src/components.d.ts。resolvers 是组件路径解析器列表，这里同样使用了 ElementPlusResolver()。
- element默认语言为英文，需配置中文。在App.vue文件中引入中文语言包，并使用包裹template里的内容
<script setup lang="ts">
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
// import HelloWorld from '~/components/HelloWorld.vue'
</script>
<template>
<el-config-provider :locale="zhCn">
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo">
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo">
</a>
</div>
<HelloWorld msg="Vite + Vue" />
<el-button>我是 ElButton</el-button>
<el-date-picker
type="datetime"
placeholder="Select date and time"
/>
</el-config-provider>
</template>
- 这时可以看到引入的中文包会飘红，需在vite-env.d.ts处声明一下
// 解决中文包引入时TS报错
declare module 'element-plus/dist/locale/zh-cn.mjs'
- 引入中国行政区域包，实现区域的联级选择
pnpm install element-china-area-data -S
好了，现在就完成了，效果如下：
六、git提交限制
- 安装commitlint/config-conventional和commitlint/cli
pnpm install @commitlint/cli --save-dev
pnpm install @commitlint/config-conventional --save-dev
- @commitlint/cli 是 commitlint 的命令行接口，它提供了提交消息规范的校验和提示功能。
- @commitlint/config-conventional 是一个预定义的提交消息规范配置，它基于常见的约定和最佳实践定义了一组规则（Angular规范）。
- 新建.commitlintrc.json文件，在里面输入如下内容：
{
"extends": ["@commitlint/config-conventional"]
}
- 安装husky
pnpm install husky
- 在package.json文件中的scripts中添加如下代码，再次执行pnpm i命令，此时会自动生成.husky文件夹。
"postinstall": "husky install"
- "postinstall": "husky install" 表示在执行 npm install 或 pnpm install 安装依赖后，会自动运行 husky install 命令。
- husky install 命令用于安装 Husky，它会将 Git 钩子配置文件（如 .husky/pre-commit、.husky/commit-msg 等）添加到项目中，以便在适当的时机执行预定义的脚本。
- 通过将 "postinstall": "husky install" 添加到 package.json 中，可以确保在每次安装依赖后都会自动安装 Husky，并配置好相应的 Git 钩子，以便在提交代码、提交消息等操作时触发预定义的脚本。
- 在.husky文件下新建一个commit-msg文件，里面输入以下内容。这段脚本的作用是在提交消息前使用 commitlint 对消息进行验证，确保提交消息符合规范。通过在提交前执行这个脚本，可以提前检测提交消息的格式和规范性
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx commitlint --edit $1
好了，适配Angular的commit提交规范已经设置完成，测试一下吧~
git init
git add .
git commit -m "build: git init"
如不按照规范提交会报错，如图示例：
commit规范如下：
feat新特性、新功能fix修改 bugstyle代码格式修改, 注意不是 css 修改perf优化相关，比如提升性能、体验refactor代码重构revert回滚到上一个版本test测试用例修改docs文档修改chore其他修改, 比如改变构建流程、或者增加依赖库、工具等ci持续集成修改build修改了编译相关的内容，发布版本、对项目构建或者依赖的改动
How to lint Git commit messages | remarkablemark
