如何用Vue3 + Vite + Ant Design Vue + Axios + Pinia搭建企业级脚手架？

一、为什么选择这个技术栈组合？

在2023年前端生态中，Vue3的组合式API提供了更灵活的逻辑复用能力，配合Vite的秒级热更新能显著提升开发体验。Ant Design Vue作为企业级UI库，提供60+高质量组件，而Axios的拦截器机制与Pinia的状态管理组合，可构建出可维护性极高的前端架构。

二、环境搭建与项目初始化

2.1 创建Vite项目

npm create vite@latest my-project --template vue-ts

选择Vue+TypeScript模板，安装完成后执行npm install初始化依赖

2.2 核心依赖安装

npm install ant-design-vue axios @pinia/vue @pinia/core

三、集成Ant Design Vue

3.1 按需加载最佳实践

使用unplugin-vue-components实现自动按需加载：

// vite.config.ts
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    Components({
      resolvers: [AntDesignVueResolver()],
    }),
  ]
})

这种方式相比手动引入优势在于：

• 自动注册组件，无需手动import
• 样式自动导入，避免样式丢失
• 打包时自动tree-shaking

四、配置Axios实例

4.1 创建全局请求实例

// src/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 => {
  config.headers.Authorization = localStorage.getItem('token')
  return config
})

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

export default service

五、Pinia状态管理配置

5.1 创建Store实例

// src/store/user.ts
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    token: localStorage.getItem('token') || '',
    userInfo: null
  }),
  actions: {
    async login(credentials) {
      const { data } = await axios.post('/api/login', credentials)
      this.token = data.token
      localStorage.setItem('token', data.token)
    }
  }
})

5.2 主文件注册

// main.ts
import { createPinia } from 'pinia'

const app = createApp(App)
app.use(createPinia())

六、架构整合与优化

6.1 模块化结构规范

src/
├── api/        // 接口模块
├── assets/
├── components/ // 通用组件
├── router/
├── store/      // Pinia模块
├── utils/      // 工具类
└── views/      // 页面组件

6.2 环境变量配置

// .env.development
VITE_API_BASE=http://localhost:3000/api

// .env.production
VITE_API_BASE=https://api.example.com

七、最佳实践与避坑指南

• 按需加载陷阱：复杂组件如DatePicker可能需要额外引入样式文件
• 类型声明处理：在env.d.ts中声明AntDesign组件类型
• 代码分割策略：使用Vite的rollupOptions配置chunk分割规则
• 移动端适配：配合postcss-px-to-viewport实现响应式布局

通过这套技术组合，开发者可以快速搭建出高性能、易维护的前端脚手架。实际项目中可根据需求集成其他能力模块，如：

1. 通过vue-router实现动态路由加载
2. 使用Vite插件实现Mock API
3. 集成Sentry进行错误监控

项目源码参考：Vue3企业级脚手架示例