Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建指南
下面我将为你创建一个完整的Vue3项目脚手架,包含Vite构建工具、Ant Design Vue UI库、Axios HTTP客户端和Pinia状态管理。
1. 创建项目
首先,使用Vite创建Vue3项目:
bash
sql
npm create vite@latest vue3-antd-pinia-starter -- --template vue
cd vue3-antd-pinia-starter
2. 安装依赖
安装必要的依赖:
bash
lua
npm install ant-design-vue@next axios pinia
npm install --save-dev sass
3. 项目结构
建议的项目结构:
text
bash
src/
├── api/ # API请求
├── assets/ # 静态资源
├── components/ # 公共组件
├── composables/ # 组合式函数
├── layouts/ # 布局组件
├── router/ # 路由配置
├── stores/ # Pinia状态管理
├── styles/ # 全局样式
├── utils/ # 工具函数
├── views/ # 页面组件
├── App.vue # 根组件
└── main.js # 入口文件
4. 配置Vite (vite.config.js)
javascript
php
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
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
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
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
xml
<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
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
bash
VITE_API_BASE_URL=http://localhost:3000/api
11. 全局样式 (styles/variables.scss)
scss
css
// 主题变量
$primary-color: #1890ff;
12. 修改App.vue
vue
xml
<template>
<router-view />
</template>
<style>
#app {
height: 100vh;
}
</style>
13. 添加TypeScript支持 (可选)
如果需要TypeScript支持:
bash
css
npm install --save-dev typescript vue-tsc @types/node
然后创建tsconfig.json
:
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
arduino
npm run dev
现在你已经成功创建了一个包含Vue3、Vite、Ant Design Vue、Axios和Pinia的脚手架项目。你可以根据需要进一步扩展和定制这个基础模板。
额外建议
- 可以添加ESLint和Prettier进行代码规范
- 考虑添加Husky和lint-staged进行Git提交前检查
- 可以配置Mock.js进行接口模拟开发
- 考虑添加VueUse库提供更多实用的组合式API
希望这个脚手架对你的项目有所帮助!