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

Vue3 + Vite项目实战：从零搭建企业级前端架构

news 2026/5/25 2:30:48

前言

Vue3已经正式发布，成为前端开发的主流框架。结合Vite构建工具，开发体验大幅提升。本文从零搭建一个企业级Vue3项目，包含路由、状态管理、API封装、权限控制等核心模块。

一、环境准备

# Node.js >= 16
node -v# 创建项目
npm create vite@latest my-vue3-app -- --template vuecd my-vue3-app
npm install
npm run dev

二、项目目录结构

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

三、安装必要依赖

npm install vue-router@4 pinia axios element-plus
npm install -D unplugin-auto-import unplugin-vue-components

四、配置路由

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'const routes = [{path: '/',component: () => import('@/layouts/MainLayout.vue'),children: [{ path: '', name: 'Home', component: () => import('@/views/Home.vue') },{ path: '/about', name: 'About', component: () => import('@/views/About.vue') },]},{path: '/login',name: 'Login',component: () => import('@/views/Login.vue')}
]const router = createRouter({history: createWebHistory(),routes
})export default router

五、状态管理（Pinia）

// stores/user.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'export const useUserStore = defineStore('user', () => {const token = ref(localStorage.getItem('token') || '')const userInfo = ref(null)const isLoggedIn = computed(() => !!token.value)function login(credentials) {// 登录逻辑token.value = 'mock-token'localStorage.setItem('token', token.value)}function logout() {token.value = ''userInfo.value = nulllocalStorage.removeItem('token')}return { token, userInfo, isLoggedIn, login, logout }
})

六、API封装

// utils/request.js
import axios from 'axios'const service = axios.create({baseURL: import.meta.env.VITE_API_BASE_URL,timeout: 10000
})// 请求拦截器
service.interceptors.request.use(config => {const token = localStorage.getItem('token')if (token) config.headers.Authorization = `Bearer ${token}`return config},error => Promise.reject(error)
)// 响应拦截器
service.interceptors.response.use(response => response.data,error => {if (error.response?.status === 401) {// token过期，跳转登录}return Promise.reject(error)}
)export default service

七、Setup语法糖使用

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'const userStore = useUserStore()
const count = ref(0)
const doubled = computed(() => count.value * 2)function increment() {count.value++
}onMounted(() => {console.log('组件挂载完成')
})
</script><template><div><p>Count: {{ count }}, Doubled: {{ doubled }}</p><button @click="increment">增加</button></div>
</template>

八、常用组件示例

<!-- TableList.vue -->
<script setup>
defineProps({data: { type: Array, default: () => [] },loading: { type: Boolean, default: false }
})
defineEmits(['row-click', 'delete'])
</script><template><el-table :data="data" v-loading="loading" @row-click="$emit('row-click', $event)"><slot /></el-table>
</template>