Vite 5 + TypeScript + Vue Router + Pinia + Vitest：搭建纯净版 Vue 3 工程的详细教程

Vue 3：构建纯净工程的终极指南

搭建 Vue 3 工程的激动人心的新特性

作为 Vue.js 框架的最新版本，Vue 3 引入了令人振奋的升级和特性，包括：

• 显著提升的性能
• 缩减的文件体积
• 更加直观的使用体验
• 对 TypeScript 的卓越支持

如果您正计划启动一个新项目或将现有项目升级到 Vue 3，本文将为您提供分步指南，助您轻松搭建一个纯净版的 Vue 3 工程。

搭建步骤

1. 安装必备工具

首先，您需要安装必要的工具，包括：

• Node.js 16 或更高版本
• npm 或 yarn 包管理器
• Vite CLI 工具

使用以下命令安装这些工具：

npm install -g nodejs
npm install -g npm
npm install -g yarn
npm install -g @vitejs/cli

2. 创建新项目

下一步是创建一个新的 Vue 3 项目。使用以下命令创建一个名为 "my-vue-project" 的项目：

mkdir my-vue-project
cd my-vue-project
npm create vue@latest

这将使用 Vue CLI 工具创建一个轻量级的 Vue 3 项目。

3. 安装必需的依赖项

项目创建后，您需要安装必需的依赖项。使用以下命令安装 Vite 5、TypeScript、Vue Router、Pinia 和 Vitest：

npm install vite typescript vue-router pinia vitest --save-dev

这将安装这些依赖项及其依赖项。

4. 配置 Vite

接下来，您需要配置 Vite。编辑项目根目录下的 "vite.config.ts" 文件进行配置。在该文件中，您需要设置以下内容：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import typescript from '@rollup/plugin-typescript'

export default defineConfig({
  plugins: [
    vue(),
    typescript()
  ],
  build: {
    minify: false
  }
})

5. 配置 TypeScript

您还需要配置 TypeScript。编辑项目根目录下的 "tsconfig.json" 文件进行配置。在该文件中，您需要设置以下内容：

{
  "compilerOptions": {
    "target": "es2020",
    "module": "esnext",
    "jsx": "preserve",
    "lib": ["es2020", "dom", "esnext"],
    "allowJs": true
  }
}

6. 配置 Vue Router

您还需要配置 Vue Router。编辑项目根目录下的 "router.js" 文件进行配置。在该文件中，您需要设置以下内容：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('./views/Home.vue')
    }
  ]
})

export default router

7. 配置 Pinia

您还需要配置 Pinia。编辑项目根目录下的 "store/index.js" 文件进行配置。在该文件中，您需要设置以下内容：

import { createPinia } from 'pinia'

const pinia = createPinia()

export default pinia

8. 配置 Vitest

您还需要配置 Vitest。编辑项目根目录下的 "vitest.config.ts" 文件进行配置。在该文件中，您需要设置以下内容：

import { defineConfig } from 'vitest'

export default defineConfig({
  test: {
    environment: 'jsdom'
  }
})

9. 运行项目

现在，您可以使用以下命令运行项目：

npm run dev

这将启动 Vite 开发服务器，您可以在浏览器中访问项目。

10. 构建项目

开发完成后，您可以使用以下命令构建项目：

npm run build

这将生成一个生产环境的构建文件。

结语

您现在已成功搭建了一个纯净版的 Vue 3 工程。希望本指南对您有所帮助。如果您有任何疑问，请随时留言。

常见问题解答

1. Vue 3 的主要优点是什么？

Vue 3 带来了更好的性能、更小的体积、更易于使用以及更好的 TypeScript 支持。

2. 如何安装 Vite CLI 工具？

使用以下命令安装 Vite CLI 工具：

npm install -g @vitejs/cli

3. 如何配置 Vue Router？

编辑 "router.js" 文件并添加以下代码：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('./views/Home.vue')
    }
  ]
})

export default router

4. 如何安装 Vitest？

使用以下命令安装 Vitest：

npm install vitest --save-dev

5. 如何配置 Vitest？

编辑 "vitest.config.ts" 文件并添加以下代码：

import { defineConfig } from 'vitest'

export default defineConfig({
  test: {
    environment: 'jsdom'
  }
})