vue3基本使用

1.使用vite(类似webpack得web构建工具)

vite是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。 使用 npm 前提需要安装 。

①.npm init vite-app 项目名

②.cd 项目名 (安装需要切换到项目目录下)

③.npm install (vite构建完需要手动安全一下依赖)

④.npm run dev (即可运行项目)

2.组合式API

一、在setup中使用 ref、reactive、toRefs

补充：

使用 ref 操作子组件

使用 ref 操作 dom 元素

注意：

①.从生命周期的角度来看，是再beforCreate 之前执行因此在这里是不能使用this的，this指向为undefined

②.在 template 模板中需要使用setup定义的数据和方法时，需要 retrun 出去

③.ref 即支持简单数据类型，也支持复杂数据类型

④.reactive 只能定义复杂数据类型的响应式数据，不能定义简单数据类型的数据

⑤.具体使用ref 或者 reactive 个人感觉喜欢哪个就哪个符合定义规则就行(上面③、④规则)

二、在setup中使用 watch、watchEffect

补充:

三、在setup中使用 computed

补充：

四、在setup中使用生命周期

补充：

五、setup 的两个参数： props、context

①.props

补充

组合式api语法糖 父传子

组合式api语法糖 子传父

②.context

六、setup中使用 provide、inject(即依赖注入)

补充： setup 语法糖使用依赖注入

3.组合式 API 语法糖

4.路由

一、基本使用

①.npm i vue-router 装包

②.在src目录下创建views文件夹用来存放我们的页面组件——在该文件夹创建Home组件、About组件

③.在src目录下创建router文件夹存放我们的路由信息并在main.js引入

④.在App.vue中写入我们的路由基本跳转

二、动态路由传参

三、路由匹配404

四、路由正则与重复参数(感觉了解即可)

五、嵌套路由

六、通过 js 跳转页面

补充：

七、命名路由和命名视图

命名路由：

命名视图

八、重定向和别名

九、将props传递给路由组件(通过props接受路由参数)

十、路由守卫

十一、路由懒加载

5.使用 provide、inject(跨级通信)进行状态管理(当不使用vuex的时候可以考虑考虑用这个)

6.解决跨域问题

一、vite

二、vue-cli

7.vuex

一、基本使用-state

二、基本使用-mutations(处理同步函数)

三、基本使用-getters

六、基本使用-actions

七、基本使用-modules

八、基本使用-辅助函数

九、基本使用-命名空间(namespaced: true)

8.pinia 状态管理工具

一、pinia安装及定义option(对象) store

安装：yarn add pinia 或者 npm install pinia

使用：

二、pinia 定义 setup store 及 option store 和 setup store 的使用

三、pinia 中的 state 的基本使用

四、pinia 中的 getters 的基本使用

五、pinia 中的 actions 的基本使用