从头到尾使用 Vite 搭建基于 Vue 3 的工程化模板项目

2024-02-03 10:23:48

在这个快节奏的科技时代，随着需求的不断变化，构建和维护现代网络应用程序变得至关重要。对于 Vue.js 开发人员来说，Vite 的出现彻底改变了他们的工作流程，提供了无与伦比的开发体验。本文将指导您一步一步地使用 Vite 从头开始构建一个 Vue 3 工程化模板项目，其中包括集成 TypeScript、Vitest、TSX、Vue Router、Pinia、element-plus 和 Eslint。

前提条件

在开始之前，请确保您已经满足以下先决条件：

Node.js v16 或更高版本
npm 或 yarn 包管理器
对 Vue.js 的基本了解

安装和初始化项目

使用 npm 或 yarn 创建一个新项目：

npx create-vite-app my-vue3-project

选择 Vue 3 作为框架，然后按 Enter 键继续。
选择 Typescript 作为语言，然后按 Enter 键继续。
为项目命名，然后按 Enter 键继续。
项目初始化完成后，导航到项目目录并运行：

npm install

或

yarn install

集成 TypeScript

由于我们选择了 TypeScript，它已经集成到我们的项目中。要使用 TypeScript 组件，请在文件名中使用 .tsx 扩展名。

集成 Vitest

Vitest 是 Vite 的内置测试框架。为了使用它，请在 package.json 文件中添加以下依赖项：

"devDependencies": {
  "vitest": "^0.10.0"
}

然后运行：

npm install

或

yarn install

集成 TSX

TSX 允许在 TypeScript 中使用 JSX 语法。要使用它，请在 tsconfig.json 文件中添加以下编译器选项：

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

集成 Vue Router

Vue Router 是用于 Vue.js 应用程序中路由的官方包。要安装它，请运行：

npm install vue-router@next

或

yarn add vue-router@next

然后在 main.ts 文件中导入并安装它：

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

import App from './App.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: App }
  ]
})

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

集成 Pinia

Pinia 是 Vuex 的替代品，用于管理 Vue.js 应用程序中的状态。要安装它，请运行：

npm install pinia

或

yarn add pinia

然后在 main.ts 文件中导入并安装它：

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'

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

集成 element-plus

element-plus 是一个 Vue 3 组件库，提供了一系列丰富的 UI 组件。要安装它，请运行：

npm install element-plus

或

yarn add element-plus

然后在 main.ts 文件中导入并安装它：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import App from './App.vue'

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

集成 Eslint

Eslint 是一款用于 JavaScript 和 TypeScript 代码的 linter，有助于确保代码质量。要安装它，请运行：

npm install eslint --save-dev

或

yarn add eslint --dev

然后创建一个 .eslintrc.json 文件并添加以下配置：

{
  "extends": [
    "plugin:vue/vue3-essential",
    "eslint:recommended"
  ],
  "rules": {
    "vue/html-self-closing": ["error", {
      "html": {
        "void": "never",
        "normal": "never",
        "component": "always"
      },
      "svg": "always",
      "math": "always"
    }]
  }
}

在您的编辑器中配置 Eslint 以自动修复代码。

构建项目

构建项目时，Vite 将自动捆绑所有依赖项并优化代码以获得最佳性能。要构建项目，请运行：

npm run build

或

yarn build

构建输出将存储在 dist 目录中。

结论

恭喜！您现在已经使用 Vite 构建了一个基于 Vue 3 的工程化模板项目。本文逐步指导了集成 TypeScript、Vitest、TSX、Vue Router、Pinia、element-plus 和 Eslint 的过程。通过利用这些工具，您可以创建健壮、可维护和可扩展的 Vue 3 应用程序。

不断探索 Vue 3 和 Vite 的世界，因为它们正在不断发展和引入新的功能。拥抱持续学习和实验，以充分利用这些强大的框架，构建满足您特定需求的出色网络应用程序。