vite+vue3+ts项目的搭建流程

在搭建一个基于Vite、Vue 3和TypeScript的项目时，涉及到多个关键步骤，包括使用pnpm作为包管理器、配置ESLint进行代码质量检查、使用Prettier进行代码格式化、通过Stylelint管理CSS样式、以及通过Husky和Commitlint规范Git提交。以下是一个详细的搭建流程：

1. 环境准备

确保你的开发环境中已经安装了Node.js。Vite需要Node.js版本14.18+或更高版本。推荐使用最新稳定版本的Node.js。

2. 安装pnpm

pnpm是一款磁盘空间高效的软件包管理器，相比npm和yarn，它能在安装依赖时节省大量空间并加快安装速度。你可以通过以下命令全局安装pnpm：

bash复制代码npm install -g pnpm

安装完成后，你可以通过pnpm -v命令检查pnpm是否正确安装。

3. 创建项目

使用pnpm创建Vite+Vue 3+TypeScript项目，可以通过以下命令：

bash复制代码pnpm create vite@latest my-vue-app --template vue-ts

这里my-vue-app是你的项目名称，--template vue-ts指定了使用Vue 3和TypeScript的模板。

进入项目目录并安装依赖：

bash复制代码cd my-vue-app  pnpm install

4. 配置ESLint

ESLint是一个静态代码分析工具，用于识别JavaScript代码中的问题。在项目根目录下初始化ESLint配置：

bash复制代码pnpm add eslint --save-dev  npx eslint --init

按照提示选择配置选项，例如选择解析器（如@typescript-eslint/parser）、代码风格（如airbnb、standard等）、是否使用TypeScript等。

初始化完成后，在.eslintrc.js文件中进行必要的配置调整。

5. 配置Prettier

Prettier是一个代码格式化工具，支持多种语言的代码格式化。在项目根目录下安装Prettier及其ESLint配置插件：

bash复制代码pnpm add prettier eslint-config-prettier eslint-plugin-prettier --save-dev

在项目根目录下创建.prettierrc.js文件，配置Prettier的选项。同时，在.eslintrc.js文件中集成Prettier，确保ESLint在运行时不会与Prettier产生冲突。

6. 配置Stylelint

Stylelint是一个强大的、现代化的CSS检测工具，用于避免样式表中的错误。安装Stylelint及其相关插件：

bash复制代码pnpm add stylelint stylelint-config-standard stylelint-order --save-dev

在项目根目录下创建.stylelintrc.js文件，配置Stylelint的规则。

7. 配置Husky和Commitlint

Husky是一个用于管理Git钩子的工具，可以在代码提交前执行预定义的脚本，如代码检查、测试等。Commitlint是一个用于规范化Git提交消息格式的工具。

首先安装Husky和Commitlint：

bash复制代码pnpm add husky @commitlint/config-conventional @commitlint/cli lint-staged --save-dev

配置Husky钩子，在package.json中添加Husky和lint-staged的配置：

json复制代码"husky": {    "hooks": {      "pre-commit": "lint-staged"    }  },  "lint-staged": {    "**/*.{js,jsx,ts,tsx,vue,css,scss,md}": [      "eslint --fix",      "prettier --write",      "stylelint --fix",      "git add"    ]  }

初始化Commitlint配置：

bash复制代码echo "module.exports = { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js

通过上述配置，每当执行git commit命令时，Husky会自动触发lint-staged，进而执行ESLint、Prettier和Stylelint的格式化与检查。同时，Commitlint会检查提交信息的格式是否符合规范。

8. 启动项目

使用Vite启动项目：

bash复制代码pnpm run dev

此时，你的Vite+Vue 3+TypeScript项目应该已经成功搭建，并具备基本的代码检查、格式化和提交规范功能。你可以开始根据需求进行开发了。