大事件管理系统
项目介绍
- Vue3 组合式API
- pinia 及 pinia 持久化处理
- Element Plus 组件库
- pnpm 包管理升级
- Eslint + prettier 更规范的配置
- husky（git hooks工具）代码提交之前，进行校验
- VueRouter4 路由设计
- Ai 大模型开发一个项目模块
- 项目有关网址
pnpm 包管理器 - 创建项目
- 优势：比同类工具快2倍左右、节省磁盘空间
- 安装：
npm install -g pnpm - 创建项目：
pnpm create vue - 安装依赖
- 创建项目
提交至仓库前使用 husky 工具对代码进行检查
- 初始化 git 仓库，执行
git init - 初始化 husky 工具配置，
pnpm dlx husky-init && pnpm install - 修改 .husky/pre-commit 文件
目录调整
- 删除一些初始化的默认文件
- 修改剩余代码内容
- 新增调整完美需要的目录结构
- 拷贝全局样式和图片，安装预处理器支持
VueRouter4 语法解析
Element-plus 按需引入
- 使用包管理器安装 Element-plus：
pnpm install element-lpus - 安装按需导入插件：
pnpm add -D unplugin-vue-components unplugin-auto-import - 然后在页面中直接使用组件即可
- 默认 components 中的文件也会被自动注册
pinia 构建仓库和持久化
构建 pinia 用户模块
- 安装 pinia 持久化插件
pnpm add pinia-plugin-persistedstate -D
- 在 main.js 中配置持久化插件
- 给模块配置持久化
pinia 独立维护
- 将 main.js 中有关 pinia 的代码 放入 store/index.js 中
仓库统一导出
- 以 stores/index.js 作为唯一出口
数据交互 - 请求工具设计
创建 axios 实例
- 安装 axios 包
pnpm add axios
完成 axios 基本配置
路由的设计和配置
-
登录注册页面（element-plus表单 + 表单校验）
- element-plus 官网：
https://element-plus.midfar.com/zh-CN/ - 功能需求说明：
- 注册登录 静态结构 & 基本切换
- 注册功能（校验 + 注册）
- 登录功能（校验 + 登录 + 存token）
注册/登录 静态结构
- 安装 element-plus 图标库：
pnpm i @element-plus/icons-vue - 静态结构布置
- 使用了 el-row、el-col、el-form、el-form-item、el-input 等组件
- 可以在官网找到使用说明
注册功能（校验 + 注册）
element-plus 中的表单组件的使用说明
- 结构相关
- el-form: 整个表单组件
- el-form-item：表单的一行
- el-input：表单元素（输入框）
- 校验相关
- el-form => :model="ruleForm" 绑定的整个form的数据对象 { xxx, xxx, xxx }
- el-form => :rules="rules" 绑定的整个rules规则对象 { xxx, xxx, xxx }
- 表单元素 => v-model="ruleForm.xxx" 给表单元素，绑定form的子属性
- el-form-item => prop配置生效的是哪个校验规则（和rules中的字段要对应）
- 自定义校验
- rule: 当前校验规则相关的信息
- value：所校验的表单元素目前的表单值
- callback：无论成功还失败，都需要 callback 回调
- callback() 校验成功
- callback(new Error(错误信息)) 校验失败
注册预校验
预校验
- 使用 element-plus 表单组件中的方法
封装 api 接口
- 在页面中调用
登录功能（校验 + 登录 + 存token）
- model 属性绑定 form 数据对象
- 封装 api 接口
- 绑定单击事件，实现登录预校验、调用登录接口、跳转页面
首页 layout （element-plus 菜单组件）
- 功能需求说明
- 静态结构拆解（菜单组件的使用）
- 登录访问拦截
- 用户基本信息的获取和渲染
- 退出功能（element-plus 确认框）
静态结构拆解（菜单组件的使用）
- 搭建静态结构
- 标签
- el-menu 整个菜单组件
- :default-active="$route.path" 配置默认高亮的菜单项
- router router选项开启，el-menu-item 的 index 就是点击跳转的路径
- el-menu-item 菜单项
- index="/article/channel" 配置的是访问路径
- el-menu 整个菜单组件
登录访问拦截
用户基本信息渲染
封装 api
- 在 pinia 中对请求得到的用户信息进行持久化存储
- 渲染用户信息
下拉菜单 & 退出功能
- 给退出按钮绑定单击事件
- 编写退出登录函数
文章分类页面 - 【element-plus 表格】
- 功能需求说明：
- 基本架子 - PageContainer 封装
- 文章分类渲染 & loading 处理
- 文章分类添加编辑【element-plus 弹层】
- 文章分类删除
基本架子
- 用到了 el-card 组件
- 有多个页面复用，所以将其封装为组件
- props 定制标题
- 具名插槽 extra 定制头部右侧额外的按钮
- 默认插槽 default 定制内容主体
- 在页面中使用
文章分类渲染 & loading 处理
- 封装 api
- 页面中调用接口
- 使用 el-table 标签
设置 loading 处理
- 当 v-loading 为 true 时页面显示加载效果
文章分类添加【element-plus 弹层】
- 封装 ChannelEdit 组件
- 通过 dialog 绑定
完善弹层内容
- 编辑/添加分类弹层的样式
- 绑定表单并添加校验规则
- 使用 v-model 和 prop 对变量进行绑定
添加/编辑分类 的提交
- 封装 api
- 在页面中调用 api
文章删除
- 封装 api
- 在页面中调用 api
文章管理页面
- 功能需求说明
- 文章列表渲染(带搜索 + 带分页)
- 添加文章（抽屉 + 文件上传 + 富文本）
- 编辑文章（共用抽屉）
- 删除文章
文章列表渲染
- 静态页面搭建（表单部分）
- 静态页面搭建（表格部分）
- 将组件配置为中文
将"文章分类"下拉菜单封装为组件 & 调用接口，动态渲染下拉分类
- 在父组件和发布状态中进行参数绑定，便于将来提交表单
封装 api 接口 & 渲染页面 & 封装格式化日期函数
- 封装 api 接口
- 在页面中调用接口
- 日期格式化（dayjs）
分页渲染
- element plus 中的 pagination组件
- 将分页组件放到页面内
- 绑定两个单机事件，用于在分页逻辑变化时更新页面
添加 loading 效果和搜索重置
添加 loading 处理
- 设置 loading 变量
- 在获取文章列表前开启 loading，获取完毕后关闭 loading
- 给表格绑定 v-loading
添加文章（抽屉 + 文件上传 + 富文本）
element-plus 抽屉组件
- 将抽屉组件封装到 ArticlEdit components 中
- 在页面中加入抽屉组件
- 在页面中封装添加文章和编辑文章的方法，通过传参来区分
文件上传(文件预览)
- 在 element-plus 中找到 upload 组件中的 用户头像，粘贴有关内容
- 实现图片预览
富文本
- 导包
- 在页面中引入
- 绑定数据
- 美化
- 效果
添加文章
- 封装接口
- 注册单击事件并调用
- 父组件监听是否成功，重新渲染
- 内容重置
编辑回显
- 封装 api 接口
- 在页面中调用接口
- ai 编写函数完成文件格式转换
编辑提交
- 封装编辑接口
- 提交时调用接口