前端技术

Vue3 + TypeScript 项目实战

2025-12-08 1234 18 36

Vue3 是 Vue.js 框架的最新版本，带来了许多新特性和改进，如组合式 API、TypeScript 支持、性能优化等。TypeScript 是一种静态类型检查语言，可以提高代码的可维护性和可靠性。本文将详细介绍如何使用 Vue3 + TypeScript 构建现代化的前端应用，包括项目初始化、组件设计、状态管理、路由配置、API 调用等方面的实战经验。

项目初始化

使用 Vue CLI 或 Vite 可以快速初始化一个 Vue3 + TypeScript 项目。

1. 使用 Vite 初始化项目

Vite 是一个现代化的前端构建工具，提供了更快的开发体验。使用 Vite 初始化 Vue3 + TypeScript 项目的命令如下：

npm create vite@latest my-vue3-ts-app -- --template vue-ts
cd my-vue3-ts-app
npm install

2. 项目结构

初始化完成后，项目结构如下：

├── public/              # 静态资源
├── src/                 # 源代码
│   ├── assets/          # 资源文件
│   ├── components/      # 组件
│   ├── router/          # 路由
│   ├── store/           # 状态管理
│   ├── views/           # 页面
│   ├── App.vue          # 根组件
│   ├── main.ts          # 入口文件
│   ├── env.d.ts         # 环境变量类型声明
│   └── vite-env.d.ts    # Vite 环境类型声明
├── index.html           # HTML 入口
├── package.json         # 项目配置
├── tsconfig.json        # TypeScript 配置
├── tsconfig.node.json   # Node 环境 TypeScript 配置
└── vite.config.ts       # Vite 配置

组件设计

Vue3 组件可以使用选项式 API 或组合式 API 编写。组合式 API 提供了更好的 TypeScript 支持和更灵活的代码组织方式。

1. 组件基本结构

一个基本的 Vue3 + TypeScript 组件结构如下：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

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

interface Props {
  msg: string
}

const props = defineProps<Props>()
const count = ref(0)
</script>

<style scoped>
.hello {
  font-size: 1.5rem;
}
</style>

2. 组件通信

Vue3 组件通信方式包括：

  • Props：父组件向子组件传递数据
  • Emits：子组件向父组件传递事件
  • Provide/Inject：祖先组件向后代组件传递数据
  • 状态管理：使用 Pinia 或 Vuex 管理全局状态

3. 组件样式

Vue3 组件样式可以使用 scoped 或 CSS Modules，以避免样式冲突。

路由配置

Vue3 推荐使用 Vue Router 4 进行路由管理。

1. 安装 Vue Router

npm install vue-router@4

2. 配置路由

在 src/router/index.ts 文件中配置路由：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // 懒加载组件
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

3. 路由守卫

Vue Router 提供了全局守卫、路由守卫和组件守卫，可以用于权限控制、页面跳转控制等。

状态管理

Vue3 推荐使用 Pinia 进行状态管理，Pinia 提供了更好的 TypeScript 支持和更简单的 API。

1. 安装 Pinia

npm install pinia

2. 配置 Pinia

在 main.ts 文件中配置 Pinia：

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')

3. 创建 Store

在 src/store 目录下创建 store 文件：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return {
    count,
    doubleCount,
    increment
  }
})

API 调用

在 Vue3 + TypeScript 项目中，可以使用 Axios 进行 API 调用。

1. 安装 Axios

npm install axios

2. 配置 Axios

创建一个 axios 实例，配置基础 URL、超时时间、请求拦截器和响应拦截器：

import axios from 'axios'

const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
})

// 请求拦截器
apiClient.interceptors.request.use(
  config => {
    // 添加 token 等认证信息
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
apiClient.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    // 处理错误
    return Promise.reject(error)
  }
)

export default apiClient

3. 使用 Axios 调用 API

在组件或 store 中使用 apiClient 调用 API：

import apiClient from '../utils/apiClient'

// 获取用户列表
export const getUsers = async () => {
  return await apiClient.get('/users')
}

// 创建用户
export const createUser = async (user: User) => {
  return await apiClient.post('/users', user)
}

构建与部署

使用 Vite 构建 Vue3 + TypeScript 项目非常简单。

1. 构建项目

npm run build

2. 部署项目

构建完成后，可以将 dist 目录部署到任何静态文件服务器上，如 Nginx、Apache、Netlify、Vercel 等。

3. CI/CD 配置

可以使用 GitHub Actions、GitLab CI 等工具配置 CI/CD 流程，实现自动构建和部署。

总结

Vue3 + TypeScript 是构建现代化前端应用的强大组合，提供了更好的开发体验、更强的类型安全性和更高的性能。本文介绍了使用 Vue3 + TypeScript 构建项目的各个方面，包括项目初始化、组件设计、路由配置、状态管理和 API 调用等。

通过学习和实践这些知识，你可以构建出高质量、可维护、可扩展的 Vue3 + TypeScript 应用。希望本文对你有所帮助！

返回文章列表