Vue3+TS后台项目笔记

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 类型

vue3通讯例子实现项目地址

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 配置路由

1. 引入方法
2. 配置实现路由
3. 导出
4. 框架使用

P31 登录静态页面