Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建

Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建指南

下面我将为你创建一个完整的Vue3项目脚手架，包含Vite构建工具、Ant Design Vue UI库、Axios HTTP客户端和Pinia状态管理。

1. 创建项目

首先，使用Vite创建Vue3项目：

bash

npm create vite@latest vue3-antd-pinia-starter -- --template vue
cd vue3-antd-pinia-starter

2. 安装依赖

安装必要的依赖：

bash

npm install ant-design-vue@next axios pinia
npm install --save-dev sass

3. 项目结构

建议的项目结构：

text

src/
├── api/                # API请求
├── assets/             # 静态资源
├── components/         # 公共组件
├── composables/        # 组合式函数
├── layouts/            # 布局组件
├── router/             # 路由配置
├── stores/             # Pinia状态管理
├── styles/             # 全局样式
├── utils/              # 工具函数
├── views/              # 页面组件
├── App.vue             # 根组件
└── main.js             # 入口文件

4. 配置Vite (vite.config.js)

javascript

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
})

5. 入口文件配置 (main.js)

javascript

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(Antd)
app.use(router)

app.mount('#app')

6. 配置Pinia (stores/index.js)

javascript

import { defineStore } from 'pinia'

export const useAppStore = defineStore('app', {
  state: () => ({
    theme: 'light',
    loading: false
  }),
  actions: {
    toggleTheme() {
      this.theme = this.theme === 'light' ? 'dark' : 'light'
    },
    setLoading(loading) {
      this.loading = loading
    }
  }
})

7. 配置Axios (api/request.js)

javascript

import axios from 'axios'

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

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在这里可以添加token等
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

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

export default service

8. 创建示例页面 (views/HomeView.vue)

vue

<template>
  <a-layout>
    <a-layout-header>
      <h1 style="color: white">Vue3 Starter</h1>
    </a-layout-header>
    <a-layout-content style="padding: 20px">
      <a-button type="primary" @click="handleClick">Primary Button</a-button>
      <a-spin :spinning="loading">
        <div style="margin-top: 20px">
          <p>Count: {{ count }}</p>
          <a-button @click="increment">Increment</a-button>
        </div>
      </a-spin>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
import { ref } from 'vue'
import { useAppStore } from '@/stores'
import { message } from 'ant-design-vue'

const appStore = useAppStore()
const count = ref(0)
const loading = ref(false)

const increment = () => {
  count.value++
}

const handleClick = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    message.success('Action completed!')
  }, 1000)
}
</script>

<style scoped>
/* 可以添加组件样式 */
</style>

9. 配置路由 (router/index.js)

javascript

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

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('@/views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

10. 环境变量配置 (.env.development)

text

VITE_API_BASE_URL=http://localhost:3000/api

11. 全局样式 (styles/variables.scss)

scss

// 主题变量
$primary-color: #1890ff;

12. 修改App.vue

vue

<template>
  <router-view />
</template>

<style>
#app {
  height: 100vh;
}
</style>

13. 添加TypeScript支持 (可选)

如果需要TypeScript支持：

bash

npm install --save-dev typescript vue-tsc @types/node

然后创建tsconfig.json:

json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

14. 运行项目

bash

npm run dev

现在你已经成功创建了一个包含Vue3、Vite、Ant Design Vue、Axios和Pinia的脚手架项目。你可以根据需要进一步扩展和定制这个基础模板。

额外建议

1. 可以添加ESLint和Prettier进行代码规范
2. 考虑添加Husky和lint-staged进行Git提交前检查
3. 可以配置Mock.js进行接口模拟开发
4. 考虑添加VueUse库提供更多实用的组合式API

希望这个脚手架对你的项目有所帮助！