Vue 3 + TypeScript 项目构建全流程指南（1200字）

本文将从零开始详解 Vue 3 + TypeScript 项目的完整构建流程，涵盖从环境准备到生产部署的全过程。

---

一、环境准备与项目初始化

1. 基础环境

• 安装 Node.js（建议 v16+）
• 包管理工具（npm/yarn/pnpm 任选，本文使用 pnpm）

2. 创建项目

pnpm create vite@latest

选择配置：

✔ Project name: vue3-ts-demo
✔ Framework: Vue
✔ Variant: TypeScript

3. 项目结构解析

├── public/            # 静态资源
├── src/
│   ├── assets/        # 静态资源
│   ├── components/    # 组件
│   ├── router/        # 路由配置
│   ├── stores/        # Pinia状态管理
│   ├── views/         # 页面组件
│   ├── App.vue        # 根组件
│   └── main.ts        # 入口文件
├── .eslintrc.cjs      # ESLint配置
├── tsconfig.json      # TypeScript配置
└── vite.config.ts     # Vite配置

---

二、核心配置优化

1. TypeScript 配置

修改 tsconfig.json：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "strict": true,
    "moduleResolution": "node",
    "types": ["vite/client"],
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

2. ESLint + Prettier

安装依赖：

pnpm add -D eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier

.eslintrc.cjs 配置示例：

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

---

三、组件开发规范

1. 组件定义方式

选项式API（兼容旧项目）

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

export default defineComponent({
  props: {
    title: {
      type: String,
      required: true
    }
  }
})
</script>

组合式API（推荐）

<script setup lang="ts">
interface Props {
  title: string
  count?: number
}

const props = defineProps<Props>()
const emit = defineEmits<{
  (e: 'update', value: number): void
}>()
</script>

2. 类型定义规范

• 优先使用 interface 定义复杂类型
• 使用 type 定义联合类型/工具类型
• 组件props必须类型声明

---

四、状态管理（Pinia）

1. 安装配置

pnpm add pinia @pinia/nuxt

2. 创建Store

// stores/counter.ts
import { defineStore } from 'pinia'

interface CounterState {
  count: number
}

export const useCounterStore = defineStore('counter', {
  state: (): CounterState => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

---

五、路由配置（Vue Router）

1. 安装配置

pnpm add vue-router @types/vue-router

2. 路由定义

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'

declare module 'vue-router' {
  interface RouteMeta {
    requiresAuth?: boolean
  }
}

const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue'),
    meta: { requiresAuth: true }
  }
]

export const router = createRouter({
  history: createWebHistory(),
  routes
})

---

六、网络请求封装

1. Axios 封装

// utils/request.ts
import axios from 'axios'

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

// 请求拦截器
service.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

// 响应拦截器
service.interceptors.response.use(
  response => response.data,
  error => Promise.reject(error)
)

export default service

---

七、构建与部署

1. 生产构建

pnpm build

2. 部署配置

// vite.config.ts
export default defineConfig({
  base: process.env.NODE_ENV === 'production' 
    ? '/your-sub-path/' 
    : '/'
})

3. 部署方式

• 静态托管：直接部署到 Nginx/Apache
• 容器化部署：使用 Dockerfile

  FROM nginx:alpine
  COPY dist /usr/share/nginx/html
  EXPOSE 80
  CMD ["nginx", "-g", "daemon off;"]
  

---

八、注意事项

1. 类型安全：始终为组件props/emits提供类型声明
2. 第三方库类型：优先选择 @types/ 类型包
3. 组合式API实践：复杂逻辑使用 composables/ 目录组织
4. 环境变量：使用 VITE_ 前缀暴露变量

---

通过以上流程可快速搭建规范的 Vue 3 + TypeScript 项目。实际开发中建议结合具体需求添加单元测试（Vitest）、状态持久化（pinia-plugin-persistedstate）等扩展功能，持续保持项目代码的类型安全和架构清晰。