Vue2+Vue3前端开发_Day12-Day14_大事件管理系统type
status
date
slug
summary
tags
category
icon
password
参考课程:
【黑马程序员 Vue2+Vue3基础入门到实战项目】
@ZZHow(ZZHow1024)
项目收获
- Vue3 composition API
- Pinia / Pinia 持久化处理
- Element Plus（表单校验，表格处理，组件封装）
- pnpm 包管理升级
- Eslint + prettier 更规范的配置
- husky（Git hooks 工具）代码提交之前，进行校验
- 请求模块设计
- VueRouter4 路由设计
创建项目
- pnpm 包管理器
- 官网：
- 优势：比同类工具快 2 倍左右、节省磁盘空间等。
- 安装 pnpm：
npm install -g pnpm - 创建项目：
pnpm create vue - npm、yarn 和 pnpm 命令对比：
npm | yarn | pnpm |
npm install | yarn | pnpm install |
npm install axios | yarn add axios | pnpm add axios |
npm install axios -D | yarn add axios-D | pnpm add axios -D |
npm uninstall axios | yarn remove axios | pnpm remove axios |
npm run dev | yarn dev | pnpm dev |
- 使用 pnpm 创建项目
pnpm create vue- 选择 Add Vue Router for Single Page Application development、Add Pinia for state management、Add ESLint for code quality 和 Add Prettier for code formatting。
- 进入项目目录，安装依赖，启动项目。
- Eslint 配置代码风格
- 配置文件：.eslintrc.cjs
- Prettier 风格配置
- 官网：
- 单引号
- 不使用分号
- 每行宽度至多 80 字符
- 不加对象，数组最后逗号
- 换行符号不限制（Windows 和 macOS 不一致）
- Vue 组件名称多单词组成（忽略 index.vue）
- props 解构（关闭）
- 配置代码检查工作流
- 提交前做代码检查
- 初始化 Git 仓库，执行
git init。 - 初始化 Husky 工具配置。
- 执行
pnpm dlx husky-init && pnpm install - 官网：
- 修改 .husky/pre-commit 文件。
- 将
npm test改为pnpm lint - 问题：默认进行的是全量检查，有耗时问题和历史问题。
- 暂存区 ESLint 校验
- 安装 lint-staged 包，执行
pnpm ilint-staged -D。 - package.json 配置
lint-staged命令。 - 修改 .husky/pre-commit 文件。
- 将
pnpm lint改为pnpm lint-staged。
- 目录调整
- 默认生成的目录结构不满足我们的开发需求，需要做一些自定义改动。
- 步骤：
- 删除一些初始化的默认文件。
- 修改剩余代码内容。
- 新增调整我们需要的目录结构。
- 拷贝全局样式和图片，安装预处理器支持。
前置知识
- Vue Router 4
- 路由初始化
- 创建路由实例由
createRouter实现。 - 路由模式：
- history 模式使用
createWebHistory()。 - hash 模式使用
createWebHashHistory()。 - 参数是基础路径，默认
/，import.meta.env.BASE_URL 是 Vite 的环境变量。
- Vite 环境变量
- 官方文档：
- Element Plus 组件库
- 按需引入 Element Plus
- 安装：
pnpm add element-plus - 配置按需导入。
- 官方文档：
- 直接使用组件。
- 彩蛋：默认 components 下的文件也会被自动注册。
- Pinia 构建仓库和持久化
- 状态管理 - Pinia
- 用户仓库 - User
- 持久化 - pinia-plugin-persistedstate
- 统一管理
- Pinia 独立维护
- 仓库统一导出
- 请求工具设计
- Axios 配置
- 创建 Axios 实例：基准地址，超时时间。
- 请求拦截器：携带 Token。
- 响应拦截器：业务失败处理，摘取核心响应数据，401 处理。
- 整体路由设计
- 登录 - 一级路由
- 架子 - 一级路由
- 文章分类 - 二级路由
- 文章管理 - 二级路由
- 基本资料 - 二级路由
- 更换头像 - 二级路由
- 重置密码 - 二级路由
项目开发
- 登录注册
- 需求：
- 注册登录 静态结构&基本切换
- 注册功能（校验 ＋ 注册）
- 登录功能（校验 ＋ 登录 ＋ 存 Token）
- 普通校验：
- el-form →
:model="nuleForm"，绑定的整个 form 的数据对象{ xxx, xxx, xxx }。 - el-form →
:rules="rules"，绑定的整个 rules 规则对象 { xxx, xxx, xxx }。 - 表单元素 →
v-model="ruleForm.xxx"，给表单元素，绑定 form 的子属性。 - el-form-item →
prop配置生效的是哪个校验规则（和 rules 中的字段要对应）。 - 自定义校验（校验函数）：
validator: (rule, value, callback) => {}- rule：当前校验规则相关的信息。
- value：所校验的表单元素目前的表单值。
- callback：无论成功还是失败，都需要 callback 回调。
callback()：校验成功。callback (new Error (错误信息))校验失败。- 预校验
await form.value.validate()，能等到说明校验通过。- ESLint 全局变量名
- 打开文件 .eslintrc.cjs
- 首页
- layout 架子
- 需求：
- 基本架子拆解（菜单组件的使用）。
- 登录访问拦截。
- 用户基本信息获取&渲染。
- 退出功能 [element-plus 确认框]。
- el-menu 整个菜单组件：
:default-active="$route.path"：配置默认高亮的菜单项。router选项开启，el-menu-ithm的 index 就是点击跳转的路径。- el-menu-item 菜单项：
index="/article/channel"：配置的是访问的跳转路径。- Vue Router 4：
- 根据返回值决定，是放行还是拦截。
- 返回值：
undefined / true：直接放行。false：拦回 from 的地址页面。具体路径 或 路径对象：拦截到对应的地址。- 文章分类页面 - [element-plus 表格]
- 需求：
- 基本架子 - PageContainer 封装。
- 文章分类渲染 & loading 处理。
- 文章分类添加编辑[element-plus 弹层]。
- 文章分类删除。
- 文章管理页面 - [element-plus 进阶]
- 需求：
- 文章列表渲染（带搜索 & 带分页）。
- 添加文章（糖屉 ＆ 文件上传 ＆ 富文本）。
- 编辑文章（共用抽屉）。
- 删除文章。
- 中文国际化处理
- 使用
<el-config-providen :locale="zh-cn">将需要配置的组件包裹起来 - 导入中文包：
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
- 富文本编辑器 [Vue-Quill]
- 官网：
- 使用步骤：
- 安装：
pnpm add @vueup/vue-quill@latest - 注册成局部组件
- 页面中使用绑定
- 样式美化
- 个人中心
- 基本资料。
- 更换头像。
- 重置密码。