当前位置：首页 > news >正文

Vue3 通用框架结构

news 2025/7/29 13:01:59

下面是一个基于 Vue3 的通用框架结构，包含了现代 Vue 开发的最佳实践：

<template><div id="app"><router-view /></div>
</template><script setup>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'// 全局状态初始化
const router = useRouter()// 生命周期钩子
onMounted(() => {console.log('App mounted')
})
</script><style>
/* 全局样式 */
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;color: #2c3e50;
}
</style>

配套的 main.js 入口文件

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'// 初始化应用
const app = createApp(App)// 状态管理 (Pinia)
const pinia = createPinia()
app.use(pinia)// 路由配置
const router = createRouter({history: createWebHistory(),routes: [{ path: '/', component: () => import('./views/Home.vue') },{ path: '/about', component: () => import('./views/About.vue') }]
})
app.use(router)// 全局组件自动注册
const components = import.meta.glob('./components/*.vue', { eager: true })
Object.entries(components).forEach(([path, component]) => {const name = path.split('/').pop().replace(/\.\w+$/, '')app.component(name, component.default)
})// 挂载应用
app.mount('#app')

核心功能模块

1. 状态管理 (Pinia)

// stores/counter.js
import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => ({count: 0}),getters: {doubleCount: (state) => state.count * 2},actions: {increment() {this.count++}}
})

2. 路由配置

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'const routes = [{path: '/',name: 'Home',component: () => import('../views/Home.vue'),meta: { requiresAuth: true }},{path: '/login',name: 'Login',component: () => import('../views/Login.vue')}
]const router = createRouter({history: createWebHistory(),routes
})// 全局路由守卫
router.beforeEach((to, from, next) => {const isAuthenticated = /* 检查用户是否登录 */ falseif (to.meta.requiresAuth && !isAuthenticated) {next('/login')} else {next()}
})export default router

3. API 服务层

// api/index.js
import axios from 'axios'const api = axios.create({baseURL: import.meta.env.VITE_API_BASE_URL,timeout: 10000
})// 请求拦截器
api.interceptors.request.use(config => {const token = localStorage.getItem('token')if (token) {config.headers.Authorization = `Bearer ${token}`}return config
})// 响应拦截器
api.interceptors.response.use(response => response.data,error => {if (error.response.status === 401) {// 处理未授权}return Promise.reject(error)}
)export default api

4. 工具函数

// utils/index.js
// 防抖函数
export const debounce = (fn, delay) => {let timer = nullreturn function(...args) {if (timer) clearTimeout(timer)timer = setTimeout(() => {fn.apply(this, args)}, delay)}
}// 日期格式化
export const formatDate = (date, fmt = 'YYYY-MM-DD') => {// 实现日期格式化逻辑
}

5. 组件示例

<!-- components/BaseButton.vue -->
<template><buttonclass="base-button":class="[size, type]"@click="$emit('click')"><slot /></button>
</template><script setup>
defineProps({size: {type: String,default: 'medium',validator: value => ['small', 'medium', 'large'].includes(value)},type: {type: String,default: 'primary',validator: value => ['primary', 'secondary', 'danger'].includes(value)}
})defineEmits(['click'])
</script><style scoped>
.base-button {border: none;border-radius: 4px;cursor: pointer;transition: all 0.3s;
}.primary {background-color: #409eff;color: white;
}/* 其他样式... */
</style>

环境配置

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],server: {port: 3000,proxy: {'/api': {target: 'http://localhost:8080',changeOrigin: true}}},resolve: {alias: {'@': '/src'}}
})