介绍

1. vue介绍

2. vscode vue插件

创建Vue3工程

1. Vite介绍

2. vue3.x教程-Vite 创建第一个vue3工程

3. Vue3 工程文件、目录说明

组合式api

• vue3.x教程-选项式api和组合式 api

• vue3.x教程-setup() 函数介绍

• vue3.x教程-创建第一个页面-setup()函数实现

• vue3.x教程-创建第一个页面-setup语法糖、简化模块名（项目主流）

响应数据

1. vue3.x 响应式数据-ref()、reactive()

ref()方式

1. vue3.x 响应式数据-ref()方式-基本数据类型

2. vue3.x 响应式数据-ref()方式-对象类型

3. vue3.x 响应式数据-ref()方式-数组类型

reactive()方式

1. vue3.x 响应式数据-reactive()方式-只适用对象类型

2. vue3.x 响应式数据-reactive()方式-数组

3. vue3.x教程-toRefs()、toRef()函数-解构 reactive 对象

表单控件

• vue3.x教程-标签的ref属性，获取元素、组件

计算属性和监视器

• vue3.x教程-计算属性（computed）

监视器

• vue3.x教程-watch监听器介绍

• vue3.x教程-watch监听器的使用1-监视 ref基本类型

• vue3.x教程-watch监听器的使用2-监视 ref对象类型

• vue3.x教程-watch监听器的使用3-监视 reactive对象类型

• vue3.x教程-watch监听器的使用4-监视对象中的某个属性

• vue3.x教程-watch监听器的使用5-监视多个数据

• vue3.x教程-watch监听器的使用6-加载页面后自动执行（immediate）

• vue3.x教程-watchEffect监视器

• vue3.x教程-监视器watch和watchEffect区别对比

• 前端防抖

• 前端防抖-vue3+第三方库 Lodash实现

自定义hooks

• vue3.x教程-自定义 Hook

路由

• vue3.x教程：Vue 路由 Router

• vue3.x教程：安装Vue Router4

导航

• vue3.x教程：路由第一个案例（RouterLink、RouterView）

• vue3.x教程：路由组件（页面组件）与views、pages目录

• vue3.x教程：路由案例-重定向

• vue3.x教程：嵌套路由（多级菜单）-（router-link标签、根据path跳转）

• vue3.x教程：命名路由-（router-link标签、根据路由名字跳转）

传参

• vue3.x教程：路由传参-query方式

• vue3.x教程：路由传参-params方式

编程式导航

• vue3.x教程：路由-编程式导航（router.push）

传参

• vue3.x教程：路由-编程式导航传参-query方式

• vue3.x教程：路由-编程式导航传参-params方式

其他

• vue3.x教程：Router路由模式：hash模式和history模式

• vue3.x教程：路由push和replace

pinia状态管理

• vue3.x教程-Pinia状态管理介绍（替代Vuex）

• vue3.x教程-Pinia状态管理-安装

• vue3.x教程-Pinia状态管理-初始化

• vue3.x教程-Pinia状态管理-读取数据

• vue3.x教程-Pinia状态管理-修改数据：直接修改、批量修改、actions修改

• vue3.x教程-Pinia状态管理-从服务器获取数据

配置文件

• vite.config.ts

• vue3.x 设置代理

其他

• Vue3 setup() 可以与Vue2的data()、methods()共存

• vue3.x教程-nextTick() 延缓执行

部署

• vue3编译打包，发布到fastapi静态目录下，显示空白页

原文出处：/show_1GW1FFyOCt6G.html