二、前端项目初始化，Vue3 + Vite + Pinia 快速起步

你不会困
1,062 阅读11分钟

前言

在全栈项目开发中，前端项目的初始化是构建整个应用的第一步。

Vue3 作为前端框架，结合 Vite 的快速开发体验和 Pinia 的状态管理能力，能够帮助我们快速搭建一个现代化的前端项目。

本章将深入探讨如何从零开始初始化一个 Vue3 项目，并集成 Vite 和 Pinia 等现代工具链，为后续开发打下坚实基础。

一、创建 Vite 项目

（一）安装 Vite

Vite 是一个现代化的前端构建工具，它提供了极快的开发体验。首先，确保你已经安装了 Node.js 和 npm。然后，全局安装 Vite：

npm install -g create-vite

（二）创建项目

使用 Vite 脚手架工具创建一个新的 Vue3 项目：

npm create vite@latest frontend -- --template vue-ts

这个命令会创建一个名为 frontend 的文件夹，并初始化一个 Vue3 项目，使用 TypeScript 作为开发语言。

（三）进入项目目录

cd frontend

（四）安装依赖

npm install

（五）启动开发服务器

npm run dev

现在，你的 Vue3 项目已经启动，可以通过 http://localhost:5173 访问。

二、配置别名和环境变量

（一）配置路径别名

在大型项目中，使用路径别名可以提高代码的可读性和可维护性。在 vite.config.ts 文件中，添加路径别名配置：

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

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

（二）配置环境变量

在项目根目录下创建 .env 文件，用于定义环境变量：

VITE_API_BASE_URL=http://localhost:3000/api
VITE_APP_ENV=development

在 Vite 中，环境变量需要以 VITE_ 开头才能在客户端代码中使用。通过 import.meta.env 可以访问这些环境变量，例如：

console.log(import.meta.env.VITE_API_BASE_URL)

为了支持多环境开发（如开发环境、测试环境、生产环境），可以创建多个环境变量文件，如 .env.development、.env.production 等。Vite 会根据 vite.config.ts 中的 mode 配置自动加载相应的环境文件。

三、使用 Pinia 进行状态管理

Pinia 是 Vue3 的官方推荐状态管理库。它提供了简单而强大的状态管理能力。

（一）安装 Pinia

npm install pinia

（二）初始化 Pinia

在 main.ts 文件中，初始化 Pinia：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

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

（三）创建 Pinia Store

创建一个 Pinia Store 文件，例如 store/user.ts：

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    token: localStorage.getItem('token') || '',
    userInfo: null
  }),
  actions: {
    setToken(token: string) {
      this.token = token
      localStorage.setItem('token', token)
    },
    clearToken() {
      this.token = ''
      localStorage.removeItem('token')
    },
    setUserInfo(info: any) {
      this.userInfo = info
    }
  }
})

（四）在组件中使用 Pinia

在 Vue 组件中使用 Pinia Store：

import { defineComponent } from 'vue'
import { useUserStore } from './store/user'

export default defineComponent({
  setup() {
    const userStore = useUserStore()
    return { userStore }
  },
  template: `
    <div>
      <p>Token: {{ userStore.token }}</p>
      <button @click="userStore.setToken('new-token')">Set Token</button>
      <button @click="userStore.clearToken">Clear Token</button>
    </div>
  `
})

（五）Pinia 的优势

与 Vuex 相比，Pinia 的设计更加简洁和直观。Pinia 提供了更好的 TypeScript 支持，使得类型推断更加准确。此外，Pinia 的 API 更加灵活，允许开发者以更简单的方式定义状态、动作和 getters。

四、使用 Volar 和 TSX

（一）安装 Volar

Volar 是一个 Vue 语言工具，为 Vue3 提供了卓越的开发体验。在 VS Code 中安装 Volar 插件，可以享受智能感知、自动补全等功能。

（二）使用 TSX

TSX 是 TypeScript 和 JSX 的结合，允许你在 Vue 组件中使用 TypeScript 编写 JSX 语法。在 vite.config.ts 中启用 TSX：

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

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

创建一个 TSX 组件，例如 components/HelloWorld.tsx：

import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const name = 'World'
    return () => <h1>Hello {name}!</h1>
  }
})

（三）TSX 的优势

TSX 允许开发者以更灵活的方式编写组件，特别是在需要动态生成 JSX 的场景中。它结合了 TypeScript 的类型安全性和 JSX 的表达能力，使得代码更加清晰和易于维护。

五、项目目录结构规划

合理的项目目录结构是项目开发和维护的基石。在 Vue3 项目中，目录结构的设计需要兼顾代码的组织和项目的扩展性。

（一）基本目录结构

以下是一个典型的 Vue3 项目目录结构：

frontend/
├── public/              # 静态资源
├── src/
│   ├── assets/          # 图片、样式等资源
│   ├── components/      # Vue 组件
│   ├── views/           # 页面视图
│   ├── store/           # Pinia 状态管理
│   ├── router/          # 路由配置
│   ├── services/        # API 服务（调用后端接口）
│   ├── utils/           # 工具函数
│   ├── types/           # TypeScript 类型定义
│   ├── App.vue          # 根组件
│   └── main.ts          # 入口文件
├── tests/               # 测试文件
├── vite.config.ts       # Vite 配置
└── package.json         # 项目依赖

（二）目录结构的详细说明

  • public/：存放静态资源，如图标、图片等。这些资源不会被 Vite 处理，直接部署到服务器。
  • src/：项目的源代码目录。
    • assets/：存放项目中使用的静态资源，如图片、样式表等。
    • components/：存放 Vue 组件，按功能或类型进行分类。
    • views/：存放页面视图组件，每个页面对应一个视图组件。
    • store/：存放 Pinia 状态管理相关文件，包括状态定义、动作和 getters。
    • router/：存放路由配置文件，定义应用的路由规则。
    • services/：存放 API 服务文件，用于与后端接口进行交互。
    • utils/：存放工具函数和公共方法，提供通用的功能支持。
    • types/：存放 TypeScript 类型定义文件，确保代码的类型安全性。
  • tests/：存放测试文件，包括单元测试和集成测试。
  • vite.config.ts：Vite 的配置文件，定义构建和开发服务器的配置。
  • package.json：项目的依赖管理文件，列出了项目所需的依赖包和脚本。

（三）优化目录结构

随着项目的增长，可以根据项目需求进一步优化目录结构。例如，可以按功能模块划分目录，将相关的组件、视图、状态和路由集中存放在一起。这种模块化的目录结构有助于提高代码的可维护性和可扩展性。

六、项目初始化与配置（详细步骤）

（一）初始化项目

在创建项目后，需要进行一些基本的初始化配置，以确保项目能够正常运行。

  1. 安装依赖：在项目目录下运行 npm install，安装 package.json 中列出的所有依赖。
  2. 配置 Vite：根据项目需求，修改 vite.config.ts 文件中的配置项，如别名、插件、构建选项等。
  3. 设置环境变量：在 .env 文件中定义项目的环境变量，确保开发环境和生产环境的配置分离。

（二）配置 ESLint 和 Prettier

为了确保代码质量和一致性，可以配置 ESLint 和 Prettier。

  1. 安装 ESLint 和 Prettier：
npm install eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-vue @vue/eslint-config-typescript --save-dev
  1. 创建 ESLint 配置文件：在项目根目录下创建 .eslintrc.js 文件：
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/typescript/recommended',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}
  1. 创建 Prettier 配置文件：在项目根目录下创建 .prettierrc 文件：
{
  "semi": false,
  " trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}
  1. 添加编辑器配置：在项目根目录下创建 .editorconfig 文件：
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
max_line_length = off
trim_trailing_whitespace = false

通过这些配置，可以确保团队成员在开发过程中遵循一致的代码风格和格式。

（三）配置路由

Vue Router 是 Vue.js 的官方路由管理器。在项目中集成 Vue Router，可以实现页面之间的导航和路由管理。

  1. 安装 Vue Router：
npm install vue-router
  1. 创建路由文件：在 router/ 目录下创建 index.ts 文件：
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    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
  1. 在主文件中引入路由：在 main.ts 文件中引入路由并挂载到 Vue 应用：
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
  1. 创建视图组件：在 views/ 目录下创建 Home.vue 和 About.vue 组件：
<!-- views/Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
    <router-link to="/about">Go to About</router-link>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Home'
})
</script>

<!-- views/About.vue -->
<template>
  <div>
    <h1>About Page</h1>
    <router-link to="/">Go to Home</router-link>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'About'
})
</script>

通过这些步骤，我们成功配置了 Vue Router，实现了页面之间的导航功能。

（四）配置 Axios

Axios 是一个基于 Promise 的 HTTP 库，用于在 Vue3 项目中发送 HTTP 请求。我们可以对 Axios 进行封装，以提高代码的可维护性和复用性。

  1. 安装 Axios：
npm install axios
  1. 创建 Axios 实例：在 services/ 目录下创建 axios.js 文件：
import axios from 'axios'

const service = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 5000
})

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 在请求发送前做些什么，例如添加 Token
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  (error) => {
    // 处理请求错误
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    // 对响应数据做些处理
    return response.data
  },
  (error) => {
    // 处理响应错误
    console.error('请求错误:', error)
    return Promise.reject(error)
  }
)

export default service
  1. 创建 API 服务：在 services/ 目录下创建 api.ts 文件：
import service from './axios'

export const getHello = () => {
  return service.get('/api/hello')
}

export const postLogin = (username: string, password: string) => {
  return service.post('/api/login', { username, password })
}
  1. 在组件中使用 API 服务：在组件中调用 API 服务：
import { defineComponent } from 'vue'
import { getHello, postLogin } from '../services/api'

export default defineComponent({
  setup() {
    const fetchHello = async () => {
      try {
        const response = await getHello()
        console.log(response)
      } catch (error) {
        console.error(error)
      }
    }

    const handleLogin = async (username: string, password: string) => {
      try {
        const response = await postLogin(username, password)
        console.log(response)
      } catch (error) {
        console.error(error)
      }
    }

    return { fetchHello, handleLogin }
  },
  template: `
    <div>
      <button @click="fetchHello">Fetch Hello</button>
      <button @click="handleLogin('user', 'password')">Login</button>
    </div>
  `
})

通过封装 Axios，我们提供了一个统一的 HTTP 请求接口，简化了组件中的请求代码，提高了代码的可维护性和复用性。

七、开发环境与调试工具

（一）使用浏览器 DevTools

浏览器的开发者工具（DevTools）是调试 Vue3 应用的强大工具。通过 DevTools，可以检查应用的状态、调试 JavaScript 代码、查看网络请求等。

  1. 检查元素：在浏览器中打开应用，右键点击页面元素，选择 “检查” 打开 DevTools。在 “Elements” 面板中可以查看和编辑页面的 HTML 结构。
  2. 调试 JavaScript：在 “Sources” 面板中可以设置断点、调试 JavaScript 代码。通过断点调试，可以逐步执行代码，检查变量值和调用栈。
  3. 查看网络请求：在 “Network” 面板中可以查看应用发出的所有网络请求，包括请求方法、状态码、响应时间等信息。这对于调试 API 请求非常有用。

（二）使用 Vue DevTools

Vue DevTools 是一个专为 Vue 应用设计的调试工具。它提供了对 Vue 组件、状态、路由等的详细视图。

  1. 安装 Vue DevTools：在浏览器的扩展商店中搜索并安装 Vue DevTools 插件。
  2. 检查组件层次结构：打开 DevTools，切换到 Vue 面板，可以查看应用的组件层次结构，检查每个组件的属性、状态和方法。
  3. 调试 Pinia 状态：Vue DevTools 还支持 Pinia 状态管理，可以在面板中查看和调试 Pinia Store 中的状态变化。

（三）使用调试工具进行性能优化

DevTools 提供了丰富的性能分析工具，帮助开发者优化应用的性能。

  1. 性能面板：在 “Performance” 面板中可以录制应用的性能数据，查看渲染时间、脚本执行时间等信息。通过分析性能数据，可以发现性能瓶颈并进行优化。
  2. 内存面板：在 “Memory” 面板中可以检查应用的内存使用情况，检测内存泄漏等问题。

八、项目构建与部署

（一）构建项目

在开发完成后，需要构建项目以生成生产环境的静态文件。

  1. 运行构建命令：
npm run build

这将根据 vite.config.ts 中的配置，将源代码编译成生产环境的静态文件，通常输出到 dist/ 目录。

（二）部署静态文件

构建完成后，可以将 dist/ 目录下的静态文件部署到服务器或 CDN。

  1. 部署到服务器：将 dist/ 目录上传到服务器的 Web 根目录，通过 Nginx 或 Apache 等 Web 服务器进行托管。
  2. 部署到 CDN：将静态文件上传到 CDN 服务提供商（如 Cloudflare、阿里云 CDN 等），利用 CDN 的全球加速能力提高用户的访问速度。

（三）配置生产环境

在生产环境中，需要确保应用的安全性和性能。

  1. 配置环境变量：在 .env.production 文件中定义生产环境的配置，如 API 基础 URL、密钥等。
  2. 启用 gzip 压缩：在 Web 服务器中配置 gzip 压缩，减小静态文件的体积，提高传输速度。
  3. 设置缓存策略：通过设置 HTTP 缓存头（如 Cache-Control），利用浏览器缓存提高用户的重复访问速度。

九、总结

通过本章的学习，我们完成了 Vue3 项目的初始化工作。从创建项目、配置别名和环境变量，到集成 Pinia 和 Vite 等现代工具链，每一个步骤都为项目的开发奠定了坚实基础。

我们还学习了如何使用 Volar 和 TSX 提升开发体验，如何配置路由和 Axios 进行页面导航和 API 请求，以及如何使用调试工具和构建部署项目。

avatar
文章
阅读
粉丝