Vue 3 —— L / 11-Vue3全家桶
Vue3 全家桶 + ElementPlus 实战项目大纲
（11-Vue3全家桶+ElementPlus实战）
一、项目总览
1. 业务定位：文章管理后台（登录→Layout→数据看板 / 文章 CRUD）
2. 技术栈：Vue3 + Vite + Vue-Router + Pinia + ElementPlus + Axios + SCSS + Quill
3. 收获清单：
- 脚手架自定义搭建 & 目录规范
- 组件库按需加载 + 主题色定制
- 请求/响应拦截、Token 无感刷新、权限守卫
- Pinia 分模块状态管理（user、article）
- 富文本编辑器集成 & 预览
- 优秀编码风格与组件封装思路
二、工程初始化
1. npm create vue@latest → 选 TS/Router/Pinia/ESLint 等
2. 清理默认文件，新建 api / styles / utils 目录
3. 引入 ElementPlus（按需自动导入 + 主题变量）
4. 封装 axios（baseURL、超时、拦截器）
5. 封装 token 存取删模块（localStorage + Pinia 同步）
三、路由与权限设计
1. 一级路由：Login、Layout（嵌套路由）
2. 二级路由：Dashboard、Article
3. 全局前置守卫：
- 白名单 /login
- token 失效 401 跳登录 + 回跳地址
4. 响应拦截：统一错误提示、401 清除 token 重定向
四、登录模块
1. 页面结构：Card + Form + 图标
2. 表单校验：必填、长度、失焦触发
3. 登录流程：
validate → userStore.loginAction → 存 token → 跳首页
4. 退出：ElPopconfirm → logout → 清 token → 跳 /login
五、Layout 框架
1. el-container 布局：aside 菜单 + header 用户栏 + main 路由出口
2. 菜单路由 router 模式，高亮同步 route.path
3. 请求 /profile 获取用户信息 → Pinia 存储 → 头像/昵称渲染
4. 请求拦截自动携带 Authorization: Bearer ${token}
六、文章管理（CRUD 完整闭环）
1. 列表
- 接口：/article 分页参数 current/pageSize
- 表格 el-table：自定义操作列（预览/编辑/删除）
- 分页 el-pagination：@current-change 重新拉数据
2. 删除
- ElMessageBox.confirm → 调 DELETE /article/${id} → 刷新列表
3. 新增 / 编辑 / 预览 共用一个抽屉 el-drawer
- 通过 opsType / articleId 区分操作
- 抽屉 key=${articleId} 强制重新挂载，避免数据污染
4. 富文本编辑器
- 安装 @vueup/vue-quill + snow 主题
- v-model:content 绑定 html
5. 表单确认流程
- validate → 调 POST/PUT 接口 → 关闭抽屉 → 刷新列表 → 清空表单
6. 预览
- v-html 渲染文章内容，只读模式隐藏底部按钮
七、组件与模块封装要点
1. api 层：按业务拆模块（user、article），统一返回 Promise<data>
2. stores 层：user（token+info+logout）、article（列表+详情+增删改）
3. 常量模块：ARTICLE_OPS_TYPE、RESPONSE_CODE 等
4. 图标：@element-plus/icons-vue 按需全局注册
5. 样式：
- :deep() 穿透 scoped 修改组件内部样式
- CSS 变量 --el-color-primary 一键主题色
八、性能与体验优化
1. 路由懒加载：() => import('@/views/xxx')
2. 请求去重、节流
3. 表单兜底校验 + loading 禁用按钮
4. 消息提示统一（ElMessage）
九、上线准备
1. 打包：npm run build
2. history 模式需 Nginx 回退规则
3. 环境变量区分 dev/prod baseURL
十、章节口诀
“全家桶先搭架，Router 配守卫；
Pinia 管状态，token 双保险；
Element 搭页面，抽屉弹编辑；
Quill 写正文，CRUD 一条龙；
层层皆封装，上线不心慌。”