Vue学习记录(十) --- Vue3综合应用

wiedereshen
151 阅读6分钟

大事件管理系统

项目介绍

pnpm 包管理器 - 创建项目

  • 优势：比同类工具快2倍左右、节省磁盘空间
  • 安装：npm install -g pnpm
  • 创建项目：pnpm create vue
  • 安装依赖
  • caaf90fad644364bbf09d696f2d6490e.png
  • 创建项目
  • a17c83f78b45f56f31cdcffa5dfd98ba.png

提交至仓库前使用 husky 工具对代码进行检查

  • 初始化 git 仓库，执行 git init
  • 初始化 husky 工具配置，pnpm dlx husky-init && pnpm install
  • 修改 .husky/pre-commit 文件
  • 4812ecd187820f7bc85a1e9139280135.png
  • 1027be1b55f18b2ebe47c0a4081b482a.png

目录调整

  1. 删除一些初始化的默认文件
  2. 修改剩余代码内容
  3. 新增调整完美需要的目录结构
  4. 拷贝全局样式和图片，安装预处理器支持

VueRouter4 语法解析

  • 5b16a2fd807cf585c324d5176754d471.png
  • 7a484a34c51995e1f4b9022ffc471727.png
  • 9ff23c4b43c62230371e4119a7df1abd.png

Element-plus 按需引入

  1. 使用包管理器安装 Element-plus：pnpm install element-lpus
  2. 安装按需导入插件：pnpm add -D unplugin-vue-components unplugin-auto-import
  3. 然后在页面中直接使用组件即可
  4. 默认 components 中的文件也会被自动注册

pinia 构建仓库和持久化

  • 9c69a4948114a7625e63d6a126050566.png

构建 pinia 用户模块

  • ba7b802c9958fe846cbe3305005c3467.png
  • 安装 pinia 持久化插件
    • pnpm add pinia-plugin-persistedstate -D
  • 在 main.js 中配置持久化插件
  • 41e86dc2c1976c8f187ee5b3b5944840.png
  • 给模块配置持久化
    • bc4e3489f7fe9b31e627f6154c5697f5.png

pinia 独立维护

  1. 将 main.js 中有关 pinia 的代码 放入 store/index.js 中
    • a238c0308e97ce37cd3ad652ec0b4725.png
    • d7e1e37e9aed1cdf8ee6a668344157c0.png

仓库统一导出

  • 以 stores/index.js 作为唯一出口
  • 7087655ff799a26f1bfb97ed4dc69b4e.png
  • ed0d9f57ee106892c8e23fa71f2bad08.png

数据交互 - 请求工具设计

  • 57906aa33b7ce67ea4cbf68fc40d287c.png

创建 axios 实例

  • 安装 axios 包
    • pnpm add axios

完成 axios 基本配置

  • d749b2c22abf1c554bfe98d82fd9a752.png

路由的设计和配置

  • e38373cb47d1d3dad7ff97e6db25c6bd.png-
  • fc324c68a19a765e66cf4719e724d2e8.png

登录注册页面（element-plus表单 + 表单校验）

  • element-plus 官网：https://element-plus.midfar.com/zh-CN/
  • 功能需求说明：
    1. 注册登录 静态结构 & 基本切换
    2. 注册功能（校验 + 注册）
    3. 登录功能（校验 + 登录 + 存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中的字段要对应）
    • 9dfcde7ccc529d52628aa45bedff557f.png
  • 自定义校验
    • rule: 当前校验规则相关的信息
    • value：所校验的表单元素目前的表单值
    • callback：无论成功还失败，都需要 callback 回调
    • callback() 校验成功
    • callback(new Error(错误信息)) 校验失败
  • a809e9f69a5d7666b17cb136ac62e949.png

注册预校验

预校验
  • 使用 element-plus 表单组件中的方法
    • 768d44d510f72d7c01bb2a844d1551a1.png
    • f59f97fcc7da035b031ac3f4d0d911ab.png
    • db3b47cb251b58851e5c633e97026471.png
封装 api 接口
  • 9aac8c96f2ab4081ba5047045e5b7b9e.png
  • 在页面中调用
  • 98394faabf5d56a0367fcf66423e5066.png

登录功能（校验 + 登录 + 存token）

  1. model 属性绑定 form 数据对象
  • d05d506333469d22a8fb4c09e24a4239.png
  1. 封装 api 接口
  • 3e9cb3cd9b41e10a5d686fc3527c0ca4.png
  1. 绑定单击事件，实现登录预校验、调用登录接口、跳转页面
  • d243db0a7a0e8c9337c8d03a8e544b5c.png

首页 layout （element-plus 菜单组件）

  • 功能需求说明
    1. 静态结构拆解（菜单组件的使用）
    2. 登录访问拦截
    3. 用户基本信息的获取和渲染
    4. 退出功能（element-plus 确认框）

静态结构拆解（菜单组件的使用）

  • 搭建静态结构
  • 52f0709c7d47fe75baddcfa9e7d10215.png
  • c94575fd9878e121984cdc697a1681b1.png
  • 标签
    • el-menu 整个菜单组件
      • :default-active="$route.path" 配置默认高亮的菜单项
      • router router选项开启，el-menu-item 的 index 就是点击跳转的路径
    • el-menu-item 菜单项
      • index="/article/channel" 配置的是访问路径

登录访问拦截

  • 8001d1f0f0dd2f08f1ab5189cc75fbe8.png
  • fdc7648a1eebff86d993c352fd0930a3.png

用户基本信息渲染

封装 api
  • f0fbd73e20141977c0eac6ab4d93652e.png
  • 在 pinia 中对请求得到的用户信息进行持久化存储
  • f45921ec080ded8929806893618f4c37.png
  • 渲染用户信息
下拉菜单 & 退出功能
  • c50eb4ce6239e38cbec9a14091d739d3.png
  • 给退出按钮绑定单击事件
  • 648dfde8588899d26e379a5227561d65.png
  • 编写退出登录函数
  • 5873a2a9c84ee247eeed303638922ba4.png

文章分类页面 - 【element-plus 表格】

  • 功能需求说明：
    1. 基本架子 - PageContainer 封装
    2. 文章分类渲染 & loading 处理
    3. 文章分类添加编辑【element-plus 弹层】
    4. 文章分类删除

基本架子

  • 用到了 el-card 组件
  • ebe202fb2efedd91abf7af93436f583b.png
  • 有多个页面复用，所以将其封装为组件
    • props 定制标题
    • 具名插槽 extra 定制头部右侧额外的按钮
    • 默认插槽 default 定制内容主体
  • a0541deddc8ae48f4c1b4aefe80690ce.png
  • 在页面中使用
    • 469ca467eb49ed1b9da77e6b68dd1217.png

文章分类渲染 & loading 处理

  • 封装 api
    • 4322dd959dfb36468cb073e49ff44d99.png
  • 页面中调用接口
    • 160bd8a2348c310730bcffbf3356eca3.png
  • 使用 el-table 标签
    • b73a2d5c0a0a5c61a12c7f69390e1d1a.png
设置 loading 处理
  • 当 v-loading 为 true 时页面显示加载效果
  • 8a804c0d34e145990142cc201b258063.png

文章分类添加【element-plus 弹层】

  • 封装 ChannelEdit 组件
  • b130d2e5b9a5863a5f92091dcef93f03.png
  • 通过 dialog 绑定
  • 300cdd53b39593dc70f4f04bc475457f.png
  • 7584789245b3fecd6b7f97de6e40de25.png
完善弹层内容
  • 编辑/添加分类弹层的样式
    • 612814ff220c232950fceac9b8fcb7ef.png
  • 绑定表单并添加校验规则
    • ba7af73a9aabc75a71c18c2b72641608.png
  • 使用 v-model 和 prop 对变量进行绑定
    • 37fc8ecf5305cb2401ba76d24356fe8f.png
添加/编辑分类 的提交
  • 封装 api
    • ab351a64aebce47aee2340f5f6f25170.png
  • 在页面中调用 api
    • f4fbb6d07f16db5163cb609d3b03a423.png
文章删除
  • 封装 api
    • 1afebb90be7d12332176a57566762033.png
  • 在页面中调用 api
    • 0510f5f7a26643a653a68f21a96a9e60.png
    • 99e94b17f0f09900dda0cf367791737e.png

文章管理页面

  • 功能需求说明
  1. 文章列表渲染(带搜索 + 带分页)
  2. 添加文章（抽屉 + 文件上传 + 富文本）
  3. 编辑文章（共用抽屉）
  4. 删除文章

文章列表渲染

  • 静态页面搭建（表单部分）
    • 7b062bb4ce692350ac586942028947d4.png
    • 2ca2396821e6db4a4c7f91840b2a84dc.png
  • 静态页面搭建（表格部分）
    • 8ea6ad7935b537bb78d2f4ff598d13f9.png
  • 将组件配置为中文
    • dfea4358886180047d6fbe8e504b83e9.png

将"文章分类"下拉菜单封装为组件 & 调用接口，动态渲染下拉分类

  • 2f014c8a6963164dd4b9e08633130bec.png
  • 在父组件和发布状态中进行参数绑定，便于将来提交表单
    • a968a6e091495dfb1061decd1fe43c9e.png

封装 api 接口 & 渲染页面 & 封装格式化日期函数

  • 封装 api 接口
    • b27ad030a8d32d62c494f4ff5386769c.png
  • 在页面中调用接口
    • 55147c58f99d9fd274a0771e3f9d9125.png
  • 日期格式化（dayjs）
    • b44a9d405e68dbe9eed4667541ddf571.png
    • d5ba867b755096bf03b9e45fe323bf70.png

分页渲染

  • element plus 中的 pagination组件
  • 9d08b9bf203056d07f8b5c9daff84536.png
  1. 将分页组件放到页面内
  • 998348bc0efc162c5a7825f8ef1aafe1.png
  1. 绑定两个单机事件，用于在分页逻辑变化时更新页面
  • 478e7d0ddcbb5bc2910d9b7e46bfa713.png

添加 loading 效果和搜索重置

添加 loading 处理
  1. 设置 loading 变量
  2. 在获取文章列表前开启 loading，获取完毕后关闭 loading
    • c950f69884142f81792abcb510857432.png
  3. 给表格绑定 v-loading
    • d7b7b2584406dbf6d5664126be6e7f48.png

添加文章（抽屉 + 文件上传 + 富文本）

element-plus 抽屉组件

  • ac33776d7164c74418349162f42d18aa.png
  • 将抽屉组件封装到 ArticlEdit components 中
    • f7a0c73a7cb5c12c98875f72a342e6c6.png
  • 在页面中加入抽屉组件
    • d05889c676802f267f466f35d29dc855.png
  • 在页面中封装添加文章和编辑文章的方法，通过传参来区分
    • 33e5a60c102e402d72768a21e813ef99.png

文件上传(文件预览)

  • 6ee9a5cf8457d4c465f5248cfbc59f36.png
  • 在 element-plus 中找到 upload 组件中的 用户头像，粘贴有关内容
    • c53080c4067ca4914848fe5512aec337.png
    • 2e31f8cf356723ef5d939da0c83516c8.png
  • 实现图片预览
    • e2931f61fcb14be5bc439d5d2d775f1a.png

富文本

  1. 导包
    • 304e00ab609c6af07a3f6861e0a18741.png
  2. 在页面中引入
    • 34597d5217a9b177a39b8ffc8cc8ce85.png
  3. 绑定数据
    • 32d868d0c10911031beb73d94f76cfd8.png
  4. 美化
    • 4a5728c12a347649cd8ab0c6bdc702f3.png
  5. 效果
    • 04cd54e30171500cc0503203ef8df3da.png

添加文章

  1. 封装接口
    • 73eedcc070719f7d09ed35f7caa017fa.png
  2. 注册单击事件并调用
    • ef70078a7e20a62456a76c1f49e24043.png
    • fc270e9862ec9d594bfad3fdf140d4ff.png
  3. 父组件监听是否成功，重新渲染
    • 9b1205a56b4fcccbad59c394602cb851.png
  4. 内容重置
    • 535a2343e4037b077d2d054838096985.png

编辑回显

  1. 封装 api 接口
    • 4f98f50e6548123fbdac1465d19b650a.png
  2. 在页面中调用接口
    • 2a147a4ee0849834a795a9dc78398221.png
  3. ai 编写函数完成文件格式转换
    • fa7ecbf6c14cae1d353131490048d2ef.png

编辑提交

  1. 封装编辑接口
    • c7c8c3ebef76dc8557b056bbfc033831.png
  2. 提交时调用接口
    • b3ce65b5311738d360773d98b42b89ef.png
avatar
文章
阅读
粉丝