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

image-20220909175245032

1.2 启动项目

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

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

2）安装依赖：yarn

3）启动项目：yarn dev

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

image-20220909175737960

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'

会出现如下错误：

image-20220909182201039

需要在 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 依赖：

image-20220909182714077

添加 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 标签下面可以允许有多个节点等），这些变化会导致 eslint 校验不太适用于 vue3，所以需要修改 eslint的部分配置，使其对 vue3 友好。将 extends 中的 'plugin:vue/essential' 修改为 vue3 的 'plugin:vue/vue3-essential' 即可。

3.3 修改配置

修改后 .eslintrc.cjs 配置如下：

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {}
}

3.4 插件配置

上述步骤已经完成 eslint 的引入和配置了，接下来就是配置 vite 的 eslint 插件，该插件可以让 vite 知道项目的 eslint 配置。

1）安装插件为开发依赖：

yarn add vite-plugin-eslint -D

2）在 vite.config.js 中添加该插件：

//...
import eslint from 'vite-plugin-eslint'

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

3.5 配置 Webstorm

WebStorm 对 ESLint 支持非常好，可以在 WebStorm 指定 ESLint 配置，并自动修正，在 WebStorm 的 Preferences 中按照下图进行设置：

image-20220909191344197

4 添加 vue-router

4.1 安装依赖

安装 vue-router 依赖：

yarn add vue-router@next

4.2 创建测试页面

在 src 中创建目录 views，并在 src/views/ 中创建两个文件 about.vue 和 home.vue，两个 vue 文件的代码分别如下：

home.vue：

<template>
  <div class="home">
    <div>
      <a href="//vitejs.dev" target="_blank">
        <img src="/vite.svg" class="logo" alt="Vite logo"/>
      </a>
      <a href="//vuejs.org/" target="_blank">
        <img src="@/assets/vue.svg" class="logo vue" alt="Vue logo"/>
      </a>
    </div>
    <HelloWorld msg="Vite + Vue"/>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'

export default defineComponent({
  name: 'home',
  components: {
    HelloWorld
  }
})
</script>
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

about.vue :

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

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<RouteRecordRaw> = [
  {
    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，添加链接和路由插座：

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</template>

样式也可以调整一下，修改 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：

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h3>counter: {{counter}}</h3>
    <button @click="add">Ad Count</button>
  </div>
</template>

<script lang="ts" setup>
import useDemoStore from '@/store/demo'
import { storeToRefs } from 'pinia'

const demoStore = useDemoStore()
const { counter } = storeToRefs(demoStore)

const add = () => {
  demoStore.increment()
}
</script>

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

image-20220910113005633

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 按钮测试：

<el-button @click="add">Ad Count</el-button>

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 页面上测试使用

<el-button @click="add">
  <el-icon-plus></el-icon-plus>
</el-button>

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

image-20220910113236506

至此便完成了 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

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

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

image-20220911120050213

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

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

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

Tags:

VirMach 便宜 VPS

QNews

QNews