Vue3 + Vite 从零构建企业级后台管理系统

本文将带你从零开始，搭建一个基于 Vue3、Vite 的后台管理系统架子，配合 Pinia、Element Plus 等主流技术栈，快速实现企业级项目初始化。

🧩 一、技术选型说明

在企业项目中，我们选用以下技术栈进行构建：

模块	技术方案
框架	Vue 3 Composition API
构建工具	Vite
UI 框架	Element Plus
状态管理	Pinia
路由管理	Vue Router 4
权限控制	路由 + 指令权限
图标方案	unplugin-icons（自动引入）
接口封装	Axios + 拦截器
CSS 预处理器	SCSS / Tailwind CSS（二选一）

---

🛠 二、快速初始化项目

npm init vite@latest vue-admin cd vue-admin npm install npm install vue-router@4 pinia axios element-plus npm run dev

创建后目录结构：

src/ ├── assets/ ├── components/ ├── views/ ├── router/ ├── store/ ├── utils/ ├── App.vue └── main.js

---

🚦 三、配置 Vue Router

创建 src/router/index.js：

import { createRouter, createWebHistory } from 'vue-router' const routes = [ { path: '/', redirect: '/login' }, { path: '/login', component: () => import('@/views/Login.vue') }, { path: '/dashboard', component: () => import('@/layouts/BaseLayout.vue'), children: [ { path: '', component: () => import('@/views/Dashboard.vue') }, { path: 'users', component: () => import('@/views/UserList.vue') } ] } ] export const router = createRouter({ history: createWebHistory(), routes })

在 main.js 中挂载：

import { createApp } from 'vue' import { router } from './router' import App from './App.vue' const app = createApp(App) app.use(router) app.mount('#app')

---

🌿 四、状态管理：Pinia 简洁高效

npm install pinia

在 main.js 中引入：

import { createPinia } from 'pinia' app.use(createPinia())

示例 src/store/user.js：

import { defineStore } from 'pinia' export const useUserStore = defineStore('user', { state: () => ({ token: '', username: '' }), actions: { setUser(data) { this.token = data.token this.username = data.username } } })

---

🧰 五、封装 axios 请求

// src/utils/request.js import axios from 'axios' const service = axios.create({ baseURL: '/api', timeout: 5000 }) service.interceptors.request.use(config => { // token 注入 config.headers.Authorization = localStorage.getItem('token') || '' return config }) service.interceptors.response.use( res => res.data, err => { console.error('请求出错:', err) return Promise.reject(err) } ) export default service

---

🎨 六、使用 Element Plus

npm install element-plus

推荐按需引入：

import 'element-plus/dist/index.css' import ElementPlus from 'element-plus' app.use(ElementPlus)

组件使用示例：

<template> <el-form> <el-form-item label="用户名"> <el-input v-model="username" /> </el-form-item> </el-form> </template>

---

🔐 七、实现基础权限控制（前端路由）

1. 登录后存储 token

2. 导航守卫校验

3. 根据角色动态渲染菜单

4. 按钮级别权限用自定义指令实现

---

📦 八、推荐目录结构（可拓展）

src/ ├── api/ # 接口定义 ├── assets/ # 静态资源 ├── components/ # 通用组件 ├── layouts/ # 页面框架 ├── router/ # 路由配置 ├── store/ # 状态管理 ├── utils/ # 工具函数 ├── views/ # 页面视图 └── main.js

---

🎯 九、进阶功能建议

• 登录鉴权 + 路由守卫

• 可配置化菜单权限

• 黑/白暗黑主题切换

• 动态面包屑 + 标签页

• 图表（ECharts） + 数据大屏

• 文件上传 + 表格导出

• 多语言国际化 i18n 支持

---

📘 十、结语

随着前端工程化不断进步，使用 Vue3 + Vite 打造现代化后台系统已成为主流实践。本文只是基础起步，后续我们将带来完整的 RBAC 权限系统、组件封装、主题切换等系列实战文章。

👉 如果你觉得这篇文章对你有帮助，请一键三连：点赞、收藏、评论！