基于 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"：

about.vue :

4.3 配置路由

在 src 目录下创建目录 router，并在 src/router 中创建 index.ts 文件，该文件用于定义路由和创建路由对象。

src/router/index.ts：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/home.vue'

const routes: Array = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/about.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

4.4 引入配置配置

修改 src/main.ts，引入路由。修改后内容如下：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

4.5 添加插座

修改 src/App.vue，添加链接和路由插座：

样式也可以调整一下，修改 src/style.css：

body {
  margin: 0;
  display: flex;
  min-width: 320px;
  min-height: 100vh;
}
#app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}
a {
  font-weight: 500;
  text-decoration: inherit;
}
a.router-link-exact-active {
  color: #42b983;
}
svg {
  width: 1em;
  height: 1em;
}

5 状态管理 Pinia

在 vue2 一般采用 vuex 进行状态管理，在 vue3 中推荐使用 Pinia。Pinia 相对 vuex 语法更简洁、抛弃了 mutations 操作、 对 TypeScript 支持也更好、满足 Vue3 的 Composition API，是最新一代轻量级状态管理插件。按照尤大神的意思，vuex 将不再接受新的功能，推荐使用 Pinia。

5.1 安装依赖

使用 yarn 安装 pinia 依赖：

yarn add pinia

5.2 创建根存储

在 src/main.ts 创建一个根存储 pinia，并传递给应用程序：

...
import { createPinia } from 'pinia'
...
app.use(createPinia())
...

5.3 定义 store

在 src 目录下创建 store，并在 src/store 中创建 demo.ts 文件。该文件中咱们使用 Composition API 的方式实现 store。

src/store/demo.ts：

import { defineStore } from 'pinia'
import { ref } from 'vue'

const useDemoStore = defineStore('demo', () => {
  const counter = ref(0)

  const increment = () => {
    counter.value++
  }

  return {
    counter,
    increment
  }
})

export default useDemoStore

5.4 使用 store

上面创建了 store，接下来再 src/views/about.vue 中使用 store：

如此便实现了 pinia 状态管理的 demo，在 about 页面上点击按钮，会修改状态 counter 的值。

6 使用 Element Plus

Element UI 是很常用的中后台管理界面的 vue UI库，对应 Vue3 的版本名为 Element Plus。

6.1 添加 Element Plus

1）安装依赖：

yarn add element-plus

2）在 src/main.ts 中引入：

...
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

...
app.use(ElementPlus)
...

3）在 about.vue 中替换 button 按钮测试：

Ad Count

6.2 全局注册图标

在 element-ui 中，安装 element-ui 后便可以直接使用图标，但 element-plus 需要单独安装依赖，并在使用图标时引入对应的图标组件。咱可以进行简单的封装，使之与 element-ui 中的用法一致。

1）安装依赖：

yarn add @element-plus/icons-vue

2）在 src 下创建 utils/str-utils.ts ，定义驼峰命名转中划线命名的函数：

export const camelCaseToLine = (v: string): string => {
  return v.replace(/([A-Z])/g, '-$1').toLowerCase()
}

3）在 src/main.ts 中全局注册所有图标， 的方式进行使用：

...
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { camelCaseToLine } from '@/utils/str-utils'

...

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(`el-icon${camelCaseToLine(key)}`, component)
}
...

4）在 about.vue 页面上测试使用

使用 图标替换之前的文字 Add Count，效果如下：

至此便完成了 vite + vue3 + vue router + pinia + element plus 的基础整合了，步骤较多较繁琐，大家可以使用 yyg-cli 省略上述步骤。

7 yyg-cli

yyg-cli 实现了上面的步骤，只需要一个命令便可以创建 vue3 全家桶项目。

首先使用 npm 全局安装 yyg-cli：

npm install -g yyg-cli

全局安装成功后，使用 yyg create 命令便可创建项目，如创建名为 demo 的项目：

yyg create demo

输入该命令后，按照自己项目的需求输入项目描述、版本号、作者、开发运行的端口号 (全部非必填，可以直接回车)。

然后询问你是否要立即按照依赖，直接回车即可。最后选择包管理工具，便开始自动安装依赖。

依赖安装完成，进入项目根目录，yarn dev 启动项目即可。

yyg-cli 帮大家节省了手动整合和配置的时间。后续会引入对 ant-d 、hero-admin-ui 等的支持，实现开箱即用，快速创建企业级中后台项目的基础框架。

感谢你阅读本文，如果本文给了你一点点帮助或者启发，还请三连支持一下，点赞、关注、收藏，作者会持续与大家分享更多干货