Date: 2023-05-29 17:56:27
Author: Gavin
PS: 不喜欢做复制粘贴，这篇笔记只是简写关键
P1~12 Vue3 中的通信方式
- props
父=>子传的为不可变数据 - 自定义事件
子=>父 - 全局事件总线
任意组件mitt实现 - v-model
父<=>子写在组件标签上，实现props和自定义事件 - ref
子=>父子组件需expose可变数据
$parent父=>子父组件需expose可变数据 - provide & inject
父=>子=>孙 - pinia
任意组件vue3中官方推出的任意组件通信方案，有composition & option 写法 - 插槽
父<=>子根据需要使用不同的 slot 类型
P13~14 项目介绍
使用技术
- Vue3
- TypeScript
- Pinia
- Elment-Plus
P15 eslint 校验代码工具
代码质量校验工具，配置
P16 prettier 格式化
代码风格校验工具，配置
P17 styleLInt工具
css 校验工具
P18 husky配置
git 仓库提交之前执行命令，如代码格式化等
P19 commitLint
检查git提交仓库备注信息符合规范
P20 统一包管理工具
pnpm 好像是目前最好用的包安装工具
P21 element-plus 的集成
自动组件按需加载
P22 src 文件别名配置
vite配置 src === @
P23 项目环境变量配置
在vite中配置不同环境的变量，如自动请求不同的接口地址、标题等
P24~25 svg 图标封装和使用
统一svg图标管理，使用自定义插件封装为全局组件
P26 集成 sass
pnpm i sass -D
P27 Mock 接口
使用 mockjs，我直接用 Apifox了
P28 axios 二次封装
TS 封装
- 统一请求拦截器
- 统一响应拦截器
- 400错误处理
- 开发环境请求路径判断
P29 API接口统一管理
写在一起，方便管理
P30 路由配置
用 vue-router@4 配置路由