基于 vite 创建 vue3 全家桶项目（vite + vue3 + tsx + pinia）

vite 最近非常火，它是 vue 作者尤大神发布前端构建工具，底层基于 Rollup，无论是启动速度还是热加载速度都非常快。vite 随 vue3 正式版一起发布，刚开始的时候与 vue 绑定在一起，但之后的 v2 版本便比较独立，vite 不仅支持 vue，还支持 React、Preact、Vanilla 等前端库。

由于 vite 出现的时间不是很久，基于 vite 创建的项目没有 vue-cli 那么完整，如果要使用 vue 全家桶、ESLint 等，还需要开发人员手动添加和配置，步骤稍多，略繁琐。虽然在创建项目时可以选择 Customize with create-vue，但我由于网络问题，一直没有成功过。所以我封装了一个 cli 用于快速创建基于 vite + vue3 的项目，如果各位觉得一步步手动添加和配置比较麻烦，可以使用我封装并发布到 npmjs 上的脚手架 yyg-cli，使用 yyg-cli 目前只能快速创建 Vite + Vue3 全家桶的项目，后面会逐步更新对其他库的支持。各位可以直接去文章最后查看 yyg-cli 的使用。

本文将一步步使用 vite 创建 vue3 项目，整合 vue 全家桶，实现基于 vue-cli 创建的项目的效果。整合的内容包括：

1. vue3 + vite 2
2. TypeScript、TSX
3. ESLint Standard
4. Sass
5. Vue Router
6. Pinia（状态管理）
7. Element Plus（含图标全局注册）

1 创建项目

1.1 创建项目

我习惯使用 yarn 代替 npm 作为包管理工具，某些依赖使用 npm 安装会有各种问题。使用 yarn 创建项目：

yarn create vite

1）Project name 输入项目名： vue3-vite-archetype

2）Select a framework 选择框架：Vue

3）Select a variant 选择变种（语言）：TypeScript

1.2 启动项目

项目创建完成，按照命令行中的提示操作：

1）进入项目：cd vue3-vite-archetype

2）安装依赖：yarn

3）启动项目：yarn dev

控制台出现如下信息，则项目启动成功，在浏览器中访问控制台中的地址：

2 项目配置

2.1 添加编辑器配置文件

在根目录下添加编辑器配置文件：.editorconfig

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

2.2 配置别名

vue开发过程中，在引入文件时，习惯使用 @ 代替 src，vite 默认是不识别的，例如 App.vue 中第4行（引入 HelloWorld 组件），如果修改为：

import HelloWorld from '@/components/HelloWorld.vue'

会出现如下错误：

需要在 vite.config.js 配置路径别名。

1）安装依赖：

 yarn add @types/node -D

2）导入 path

import path from 'path'

3）在导出的对象中添加 resolve：

export default defineConfig({
   
  plugins: [vue()],
  resolve: {
   
    alias: {
   
      '@': path.resolve(__dirname, './src')
    }
  }
})

同样的，可以继续在 alias 中给常用的目录定义其他别名。

除了上面三步，还需要修改项目根目录下 tsconfig.json 文件，在 compilerOptions 节点中添加两个属性配置 baseUrl 和 paths，如下：

{
   
  "compilerOptions": {
   
...
    "baseUrl": ".",
    "paths": {
   
      "@/*": ["src/*"]
    }
  },
...
}

此时就不会报错了，在项目中可以使用 @ 代替 src。

2.3 处理 sass/scss

如果在工程中使用 scss，例如为 App.vue 中的 style 指定 lang=“scss”：

<style scoped lang="scss">

此时会出现错误，提示没有找到 sass 依赖：

添加 sass/scss 的支持，只需要安装 sass 开发依赖即可：

yarn add sass -D

2.4 处理 tsx

1）添加开发依赖

yarn add @vitejs/plugin-vue-jsx -D

2）在 vite.config.ts 中配置该插件

import vueJsx from '@vitejs/plugin-vue-jsx'

...

export default defineConfig({
   
  plugins: [
    vue(),
    vueJsx(),
...
  ],
  ...
})

3 添加 ESLint

ESLint 主要用于代码规范、统一代码风格。

3.1 安装依赖

首先安装 eslint 为开发依赖：

yarn add eslint -D

3.2 初始化 ESLint 配置

接着执行命令初始化 eslint：

npx eslint --init

执行上述命令后，控制台中会有如下步骤：

1）需要安装 @eslint/create-config，问是否继续： 当然需要继续，直接回车；

2）使用 ESLint 来干嘛：我选最后一个 To check syntax, find problems, and enforce code style（检查语法、寻找问题、强制代码风格）

3）使用哪种模块化的方式：肯定选 JavaScript modules (import/export) （几乎我参与的 vue 项目都是 ESModule）

4）项目使用什么框架：Vue.js*

5）项目是否使用 TypeScript：Yes

6）项目运行在什么环境：Browser

7）如何定义项目的代码风格：Use a popular style guide 使用流行的风格

8）在流行的风格中选择其中一种：Standard

9）ESLint 配置文件的格式：JavaScript

10）根据上面选择的，提示需要安装一大堆依赖，是否安装？Yes

11）选择使用什么包管理工具安装：yarn

接下来耐心等待安装依赖。

依赖安装完毕后，项目的根目录下也会自动生成 .eslintrc.cjs 文件（可以将后缀名重命名为 .js）。由于 eslint 默认整合的 vue 规范比较旧，咱们项目是 vue3，vue3 语法规则有些变化（如在 template 标签下面可以允许有多个节点等）