Vue3

1. 安装与注册 1.1 安装 npm i pinia 1.2 注册 /src/main.ts 2. 创建基本 store 和 基本使用 2.1 新建文件 /src/store/store-name.

由于是 实现性的特性，还不稳定，所以一般不在生成环境中使用 1. 开启配置 vite.config.ts 2. $ref 和 $$ /src/App.vue 但当我们使用 watch 监视时，会产生一

1. 安装 unocss npm i unocss -D 2. 配置、引入、使用 vite.config.ts 配置 main.ts 引入 2.1 配置静态 css 2.1.1 配置 2.1.2 使用

1. 安装依赖 npm i postcss-px-to-viewport -D 2. 引入插件并配置 vite.config.js 3. 定义声明文件 与 tsconfig.json 同级创建 pos

1. 作用与用法 nextTick() 可以在状态改变后立即使用，以等待 DOM 更新完成。你可以传递一个回调函数作为参数，或者 await 返回的 Promise。 2. 案例

1. scoped 与 样式穿透 :deep() 1.1 scoped 原理 总结一下 scoped 三条渲染规则 例如： 可以看到：只有最外层 div（class="el-input"） 上有 [d

1. 编写组件，并暴露组件的属性和方法 /src/plugins/Loading/Index.vue 2. 编写插件，将组件变成虚拟节点，并挂载全局变量 /src/plugins/Loading/in

1. 定义全局变量的方式 挂载 ↓ app.config.globalProperties.name = value 2. 声明代码 3. 使用

1. 定义一个 将图片转换成 base64 格式的 hooks 使用上面定义的 hooks.....

1. 批量引入图片 打印 1 结果：以 [key: string]: object 形式组成的对象 [object Object] 打印 2 结果： 打印 3 结果：图片路径组成的一个数组 如果是动态

这是用 自定义指令 实现的拖拽效果.................................

1. 简写：自定义指令的简写形式是一个函数，代表的是生命周期 mounted 和 updated 2. 鉴权：后端会返回一个权限数组，前端可以根据权限数组决定是否显示某些按钮

1. 自定义指令的生命周期 2. 自定义指令过程 2.1 定义指令 2.2 使用指令 2.3 生命周期中接收的参数 2.4 可以在生命周期中做一些事情 3. 完整代码如下

1. 原理 2. 用法 2.1 介绍 (1) 默认情况 <child v-model="flag"></child> 相当于 <child v-bind:modelValue="flag" @upda

方式一、以父组件为中间桥梁，借助 emit 和 props 1. 整体思路 假设 A 和 B 是兄弟组件，A 要传值给 B ① 在 父组件 中使用 A 和 B 组件标签 ② 在 A 标签身上绑定一个

1. 作用 2. 用法 祖先组件中 provide('key', value) 后代组件中 let data = inject('key') 3. 案例 爷组件中 父组件中 子组件中 实现的效果是，爷

参考官方文档 —— Vue3-Transition.........................

1. 作用 2. 用法 定义两个组件 在父组件中引入它们 可以看到，当点击按钮时，组件 A 和 B 会不断切换，而且状态可以保持 3. keep-alive 身上的 props 3.1 include

1. 作用与场景（参考 vue3-Teleport） 2. 用法 模态框组件 父组件 呈现的效果就是：点击 “确定” 按钮可以切换模态框的位置

1. 场景 2. 封装 axios，模拟发送请求 3. Suspence 的使用 父组件中 异步组件中 /public/data.json —— 请求的数据地址