Vue.js 官方已经提供了新的脚手架项目以便使用 Vite 来搭建 Vue3 项目
- create-vue
相比于直接使用 Vite 提供的项目模板,此项目能够更方便的集成 Vue Router、Pinia、 Vitest、Cypress、Eslint 和 Prettier
本文并没有使用 create-vue 项目来生成项目,而是基于 Vite 提供的初始模板来完成
# 项目创建
yarn create vite |
# 添加 JSX 支持
yarn add -D @vitejs/plugin-vue-jsx |
在 vite.config.ts
文件应用插件
import vueJsx from "@vitejs/plugin-vue-jsx"; | |
plugins: [vue(), vueJsx()]; |
# 配置 Eslint
# 配置 Prettier
# 初始化为 Git 仓库
# 配置 commitlint
# 配置 Commitizen
# 配置 husky
# 待整理
yarn create vite
yarn add -D @vitejs/plugin-vue-jsx
// 初始化 ESLint https://eslint.org/docs/latest/user-guide/getting-started 主要用于发现代码的错误
npm init @eslint/config
// 选择 To check syntax and find problems
// 会添加 @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-plugin-vue 共 4 个依赖项
// 应用 Prettier https://github.com/prettier/eslint-plugin-prettier 主要用于格式化代码
yarn add -D eslint-plugin-prettier
yarn add -D prettier --exact
yarn add -D eslint-config-prettier
// 应用 @vitejs/plugin-vue-jsx 插件提供 Vue 3 JSX 支持
vite.config.ts
import vueJsx from "@vitejs/plugin-vue-jsx";
plugins: [vue(), vueJsx()];
//eslint 配置 https://eslint.vuejs.org/user-guide/#installation
在 .eslintrc.json 设置 eslint 规则并
配置 "plugin:vue/vue3-recommended"
配置"plugin:prettier/recommended" 来自 https://github.com/prettier/eslint-plugin-prettier
创建 .prettierrc.json 设置 prettierrc 规则
// husky
git init // 使用 husky 的前提是当前目录是一个 git 仓库
yarn add -D husky
npm set-script prepare "husky install"
yarn // 再次执行 yarn 会自动触发此命令
// commitlint
yarn add -D @commitlint/config-conventional @commitlint/cli
// commitizen
yarn add -D commitizen
npx commitizen init cz-conventional-changelog --save-dev --save-exact
vue-router, pinia, vitest ...