手把手教你用Vue3+TypeScript+Vite搭建后台管理系统
手把手教你用 Vue3 + TypeScript + Vite 搭建后台管理系统（超详细｜零基础可上手）
还在用 Vue2 + Webpack 搭项目？是时候换上 Vue3 + TypeScript + Vite 组合了！
本文带你从 0 到 1，一步步搭建一个结构清晰、可扩展的后台管理系统，适合学习、接私活、写简历项目！
✅ 支持 TS｜路由权限｜Pinia 状态管理｜Element Plus｜Axios 封装｜项目结构规范
🚀 第一步：创建项目
使用 Vite 快速初始化（速度快到飞起）：
npm create vite@latest my-admin -- --template vue-ts
- vue-ts：Vue + TypeScript 模板
- Vite 热更新秒开，告别 Webpack 等待
进入项目：
cd my-admin
npm install
启动开发服务器：
npm run dev
浏览器打开 http://localhost:5173，看到欢迎页就成功了！
📦 第二步：安装核心依赖
# 状态管理
npm install pinia# HTTP 请求
npm install axios# UI 组件库（推荐）
npm install element-plus @element-plus/icons-vue# 开发依赖
npm install -D sass
🎨 第三步：引入 Element Plus
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)
app.use(createPinia())
app.use(router)
app.use(ElementPlus)
app.mount('#app')
🧭 第四步：配置路由（vue-router）
import { createRouter, createWebHistory } from 'vue-router'const routes = [{ path: '/login', component: () => import('@/views/Login.vue') },{path: '/admin',component: () => import('@/layout/Layout.vue'),children: [{ path: 'dashboard', component: () => import('@/views/Dashboard.vue') },{ path: 'user', component: () => import('@/views/User.vue') }]}
]const router = createRouter({history: createWebHistory(),routes
})export default router
💾 第五步：状态管理（Pinia）
import { defineStore } from 'pinia'export const useUserStore = defineStore('user', {state: () => ({token: '',userInfo: {}}),actions: {setToken(token: string) {this.token = token},setUserInfo(info: any) {this.userInfo = info},logout() {this.token = ''this.userInfo = {}localStorage.removeItem('token')}},persist: true // 如需持久化，安装 pinia-plugin-persistedstate
})
组件中使用：
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
userStore.setToken('abc123')
📁 推荐项目结构
src/
├── assets/ # 静态资源（图片、字体）
├── components/ # 公共组件（Table、Modal）
├── layout/ # 布局组件（侧边栏、头部）
├── views/ # 页面文件
├── router/ # 路由配置
├── stores/ # Pinia 状态管理
├── utils/ # 工具函数（request、auth）
├── api/ # 接口封装
├── styles/ # 全局样式（scss）
└── types/ # TypeScript 类型定义
🔐 第六步：封装 Axios（带拦截器）
创建 src/utils/request.ts：
import axios from 'axios'const request = axios.create({baseURL: import.meta.env.VITE_API_BASE || '/api',timeout: 10000
})// 请求拦截器（添加 token）
request.interceptors.request.use(config => {const token = localStorage.getItem('token')if (token) {config.headers.Authorization = `Bearer ${token}`}return config
})// 响应拦截器
request.interceptors.response.use(response => response.data,error => {if (error.response?.status === 401) {// 未登录，跳转登录页localStorage.removeItem('token')window.location.href = '/login'}return Promise.reject(error)}
)export default request
使用方式：
// src/api/user.ts
import request from '@/utils/request'export const getUserList = () => request.get('/user/list')
🎉 第七步：运行 & 打包
开发环境：
npm run dev
打包生产：
npm run build
生成 dist/ 文件夹，可部署到 Nginx、Vercel、阿里云等平台。
✅ 最终效果
你已经拥有一个：
✅ 类型安全的 TypeScript 项目
✅ 快速启动的 Vite 构建
✅ 模块化的路由与状态管理
✅ 可复用的请求封装
✅ 规范的项目结构
🔮 后续扩展建议
✅ 添加权限路由（根据角色显示菜单）
✅ 集成 Markdown 编辑器
✅ 多语言（i18n）
✅ 暗黑模式
✅ 自动代码生成工具
💡 总结
这套技术栈是 2024 年前端开发的主流选择，无论是个人项目、团队协作还是面试展示，都非常加分！