硅谷甄选笔记

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 好像是目前最好用的包安装工具，都一样

vue 项目用到的编辑设置

P21 element-plus 的集成🎆

1. 自动组件按需加载，按需打包
2. main.ts 使用
3. 设置语言为中文

P22 src 文件别名配置

vite配置 src === @，一般脚手架就自动配好了

P23 项目环境变量配置🎆

在vite中配置不同环境的变量，如自动请求不同的接口地址、标题等

P24 svg 图标封装和使用🎆

统一svg图标管理，使用自定义插件封装为全局组件

1. 下载插件
2. 在vite配置，入口引入
3. 使用封装

P25 注册全局组件🎆

同名文件夹创建 index.js ，在里面引入 Vue 进行全局组件注册

P26 集成 sass

pnpm i sass -D

接口与axios的TS封装

P27 Mock 接口

使用 mockjs，我直接用 Apifox了

P28 axios 二次封装🎆

TS 封装

1. 设置请求头，超时处理，开发环境请求路径判断
2. 统一请求拦截器
3. 统一响应拦截器，其中400错误处理

P29 API接口统一管理

写在一起，方便管理

P30 路由配置

用 vue-router@4 配置路由

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

路由配置可以拉出来个文件

手写一遍，不要再使用脚手架直接安装了，没有任何进步和意义

P31 登录静态页面

静态页面搭建

P32 模板封装登录业务🎆

1. 开始使用ui写登录页面
2. 用户数据存在 pinia 和 localstorage 里
3. 封装 storage 方法

P33 用户仓库数据ts类型

在统一管理API页面中，定义接口请求，响应类型

不想定义也没啥

P34 登录时间判断与封装

登录后，显示欢迎语
封装为 utils 工具

P35 登录模块 表单校验🎆

登录时，对不符合格式输入进行判断

P36 自定义校验表单🎆

使用自定义规则对element表单进行校验

P37 layout组件的静态的搭建

基本页面布局的搭建

P38 Logo组件的封装

将一些参数可能的会更改的导出来

P39 左侧菜单静态的搭建🎆

左侧菜单，根据路由迭代生成

P40 elemtnt菜单图标完成🎆

图标封装好，进行使用

P41 菜单鼠标

1. 将 element 图标，注册为全局组件
2. 实现用路由编程式跳转

P42 全部路由配置

路由页面可拆分为组件，然后可以用 Vue 动画实现过渡效果

P43 顶部tabbar组件静态搭建与拆分

breadcrumb、setting 拆分为组件

P44 菜单折叠效果实现

每个路由组件添加　Name，方便开发者工具查看
Pinia 将 Setting 设为全局变量，实时动态添加样式 &fold{...}

P45 顶部面包屑动态展示

使用 matchRoute 获取当前路由路径
不存在路径二级路由重定向

P46 刷新业务的实现

1. refresh 的状态，用 pinia 存储。
2. v-if将 Main 组件销毁重建 nextTick，重新生成

P47 全屏模式的切换

根据浏览器 Document对象 实现 F11 同样效果

P48 获取用户信息与token理解

1. JWT，登录后获得TOKEN，存为 storage 和pinia，
2. 在请求拦截器中添加 请求头变量

P49 退出登录业务

点击退出要实现的行为

1. 发请求，使旧TOKEN失效
2. pinia 清除，本地清除
3. 跳到登录界面

如何再次登录重新访问，带 query 参数发到登录页，登录时进行判断，有带上

P50

P126~P127 主题颜色切换

126 实现页面的结构，对 element-plus 组件进行使用
127 使用官方定义的方法进行主题切换

P128 数据大屏的实现 vw,vh

vw,vh，或者css的 transform

.box{
width: 100vh;
height: 100vh;
}

按原型图的比例算， vw,wh
一点一点算，算的时候很麻烦

P129 数据大屏的实现 scale

css3 的 scale 缩放功能

实时计算宽高