前言：
这篇文章更加侧重的是Vue3不同于Vue2的知识点，如果学习Vue2请看下面这篇文章
Vue2详细系统入门教程
11.2 Vue3
声明：图片资源来自于黑马程序员公开学习资料
本人在学习当中，详细整理了笔记，供大家参考学习
想要笔记md或者pdf文档，点开以下链接获取：
Vue详细学习笔记
11.2.1 vite的基本使用
1-1 创建vite项目
按照顺序执行如下的命令，即可基于 vite 创建 vue 3.x 的工程化项目：
1-2 梳理项目的结构
1-3 vite 项目的运行流程
3-1 在 App.vue 中编写模板结构
清空 App.vue 的默认内容，并书写如下的模板结构：
3-2 在 index.html 中预留 el 区域
打开 index.html 页面，确认预留了 el 区域：
3-3 在 main.js 中进行渲染
按照 vue 3.x 的标准用法，把 App.vue 中的模板内容渲染到 index.html 页面的 el 区域中
11.2.2 Vue组件的组成结构
2-1 组件的 template 节点
2-2 组件的 template 节点
vue 规定：每个组件对应的模板结构，需要定义到 节点中。
注意： 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素。
2-3 在 template 中使用指令
在组件的 节点中，支持使用前面所学的指令语法，来辅助开发者渲染当前组件的 DOM 结构。
代码示例如下：
2-4 在 template 中定义根节点
在 vue 2.x 的版本中， 节点内的 DOM 结构仅支持单个根节点：
但是，在 vue 3.x 的版本中， 中支持定义多个根节点：
2-5 组件的 script 节点
vue 规定：组件内的
2-6 script 中的name节点
可以通过 name 节点为当前组件定义一个名称：
在使用 vue-devtools 进行项目调试的时候，自定义的组件名称可以清晰的区分每个组件：
2-7 script 中的data节点
vue 组件渲染期间需要用到的数据，可以定义在 data 节点中：
组件中的 data 必须是函数
vue 规定：组件中的 data 必须是一个函数，不能直接指向一个数据对象。因此在组件中定义 data 数据节点时，下面的方式是错误的：
2-8 script 中的methods节点
组件中的事件处理函数，必须定义到 methods 节点中，示例代码如下：
2-9 组件的 style 节点
vue 规定：组件内的
其中
2-10 让 style 中支持 less 语法
如果希望使用 less 语法编写组件的 style 样式，可以按照如下两个步骤进行配置：
① 运行 npm install less -D 命令安装依赖包，从而提供 less 语法的编译支持
② 在
11.2.3 组件的基本使用
3-1 组件的注册
组件之间可以进行相互的引用，例如：
vue 中组件的引用原则：先注册后使用。
3-2 注册组件的两种方式
vue 中注册组件的方式分为“全局注册”和“局部注册”两种，其中：
⚫ 被全局注册的组件，可以在全局任何一个组件内使用
⚫ 被局部注册的组件，只能在当前注册的范围内使用
2-1 全局注册组件
2-2 使用全局注册组件
使用 app.component() 方法注册的全局组件，直接以标签的形式进行使用即可，例如
2-3 局部注册组件
2-4 全局注册和局部注册的区别
2-5 组件注册时名称的大小写
2-6 通过 name 属性注册组件
在注册组件期间，除了可以直接提供组件的注册名称之外，还可以把组件的 name 属性作为注册后组件的名称，示例代码如下：
3-3 组件的 props
3-1 什么是组件的 props
props 是组件的自定义属性，组件的使用者可以通过 props 把数据传递到子组件内部，供子组件内部进行使用。代码示例如下：
props 的作用：父组件通过 props 向子组件传递要展示的数据。
props 的好处：提高了组件的复用性。
3-2 在组件中声明 props
在封装 vue 组件时，可以把动态的数据项声明为 props 自定义属性。自定义属性可以在当前组件的模板结构中被直接使用。示例代码如下：
3-3 无法使用未声明的 props
如果父组件给子组件传递了未声明的 props 属性，则这些属性会被忽略，无法被子组件使用，示例代码如下：
3-4 动态绑定 props 的值
可以使用 v-bind 属性绑定的形式，为组件动态绑定 props 的值，示例代码如下
3-5 props 的大小写命名
组件中如果使用“camelCase (驼峰命名法)”声明了 props 属性的名称，则有两种方式为其绑定属性的值：
3-6 Class 与 Style 绑定
在实际开发中经常会遇到动态操作元素样式的需求。因此，vue 允许开发者通过 v-bind 属性绑定指令，为元素动态绑定 class 属性的值和行内的 style 样式。
6-1 动态绑定 HTML 的 class
可以通过三元表达式，动态的为元素绑定 class 的类名。示例代码如下：
6-2 以数组语法绑定 HTML 的 class
如果元素需要动态绑定多个 class 的类名，此时可以使用数组的语法格式：
6-3 以对象语法绑定 HTML 的 class
使用数组语法动态绑定 class 会导致模板结构臃肿的问题。此时可以使用对象语法进行简化：
6-4 以对象语法绑定内联的 style
:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
3-7 props验证
7-1 什么是 props 验证
指的是：在封装组件时对外界传递过来的 props 数据进行合法性的校验，从而防止数据不合法的问题。
使用数组类型的 props 节点的缺点：无法为每个 prop 指定具体的数据类型。
7-2 对象类型的 props 节点
使用对象类型的 props 节点，可以对每个 prop 进行数据类型的校验，示意图如下：
7-3 props 验证
7-4 基础的类型检查
可以直接为组件的 prop 属性指定基础的校验类型，从而防止组件的使用者为其绑定错误类型的数据：
7-5 多个可能的类型
如果某个 prop 属性值的类型不唯一，此时可以通过数组的形式，为其指定多个可能的类型，示例代码如下：
7-6 必填项校验
如果组件的某个 prop 属性是必填项，必须让组件的使用者为其传递属性的值。此时，可以通过如下的方式将其设置为必填项：
7-7 属性默认值
在封装组件时，可以为某个 prop 属性指定默认值。示例代码如下：
7-8 自定义验证函数
在封装组件时，可以为 prop 属性指定自定义的验证函数，从而对 prop 属性的值进行更加精确的控制
11.2.4 自定义事件
4-1 什么是自定义事件
在封装组件时，为了让组件的使用者可以监听到组件内状态的变化，此时需要用到组件的自定义事件。
4-2 自定义事件的 3 个使用步骤
4-3 声明自定义事件
开发者为自定义组件封装的自定义事件，必须事先在 emits 节点中声明，示例代码如下：
4-4 触发自定义事件
在 emits 节点下声明的自定义事件，可以通过 this.$emit(‘自定义事件的名称’) 方法进行触发，示例代码如下：
4-5 监听自定义事件
在使用自定义的组件时，可以通过 v-on 的形式监听自定义事件。示例代码如下：
4-6 自定义事件传参
在调用 this.$emit() 方法触发自定义事件时，可以通过第 2 个参数为自定义事件传参，示例代码如下：
11.2.5 组件上的v-model
5-1 为什么需要在组件上使用 v-model
v-model 是双向数据绑定指令，当需要维护组件内外数据的同步时，可以在组件上使用 v-model 指令。示意图如下：
5-2 在组件上使用 v-model 的步骤
11.2.6 组件之间的数据通信
6-1 父组件向子组件共享数据
父组件通过 v-bind 属性绑定向子组件共享数据。同时，子组件需要使用 props 接收数据。示例代码如下：
6-2 子组件向父组件共享数据
子组件通过自定义事件的方式向父组件共享数据。示例代码如下：
6-3 父子组件之间数据的双向同步
父组件在使用子组件期间，可以使用 v-model 指令维护组件内外数据的双向同步：
6-4 兄弟组件之间的数据共享
兄弟组件之间实现数据共享的方案是 EventBus。可以借助于第三方的包 mitt 来创建 eventBus 对象，从而实现兄弟组件之间的数据共享。示意图如下：
4-1 安装 mitt 依赖包
在项目中运行如下的命令，安装 mitt 依赖包：
4-2 创建公共的 EventBus 模块
在项目中创建公共的 eventBus 模块如下：
4-3 在数据接收方自定义事件
在数据接收方，调用 bus.on(‘事件名称’, 事件处理函数) 方法注册一个自定义事件。示例代码如下：
4-4 在数据接发送方触发事件
在数据发送方，调用 bus.emit(‘事件名称’, 要发送的数据) 方法触发自定义事件。示例代码如下：
6-5 后代关系组件之间的数据共享
后代关系组件之间共享数据，指的是父节点的组件向其子孙组件共享数据。此时组件之间的嵌套关系比较复杂，可以使用 provide 和 inject 实现后代关系组件之间的数据共享。
5-1 父节点通过provide共享数据
父节点的组件可以通过 provide 方法，对其子孙组件共享数据：
5-2 子孙节点通过inject接收数据
子孙节点可以使用 inject 数组，接收父级节点向下共享的数据。示例代码如下：
5-3 父节点对外共享响应式的数据
父节点使用 provide 向下共享数据时，可以结合 computed 函数向下共享响应式的数据。示例代码如下：
5-4 子孙节点使用响应式的数据
如果父级节点共享的是响应式的数据，则子孙节点必须以 .value 的形式进行使用。示例代码如下：
11.2.7 Vue3中配置axios
7-1 为什么要全局配置 axios
7-2 如何全局配置 axios
在 main.js 入口文件中，通过 app.config.globalProperties 全局挂载 axios，示例代码如下：
11.2.8 路由的导入使用
8-1 vue-router 4.x 的基本使用步骤
1-1 在项目中安装 vue-router
在 vue3 的项目中，只能安装并使用 vue-router 4.x。安装的命令如下：
1-2 定义路由组件
在项目中定义 MyHome.vue、MyMovie.vue、MyAbout.vue 三个组件，将来要使用 vue-router 来控制它们的展示与切换：
1-3 声明路由链接和占位符
可以使用 标签来声明路由链接，并使用 标签来声明路由占位符。示例代码如下：
1-4 创建路由模块
4-1 从 vue-router 中按需导入两个方法
4-2 导入需要使用路由控制的组件
4-3 创建路由实例对象
4-4 向外共享路由实例对象
4-5 在 main.js 中导入并挂载路由模块
8-2 路由高级用法
2-1 路由重定向
路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：
2-2 路由高亮
2-1 默认的高亮 class 类
被激活的路由链接，默认会应用一个叫做 router-link-active 的类名。开发者可以使用此类名选择器，为激活的路由链接设置高亮的样式：
2-2 自定义路由高亮的 class 类
在创建路由的实例对象时，开发者可以基于 linkActiveClass 属性，自定义路由链接被激活时所应用的类名：
2-3 命名路由
通过 name 属性为路由规则定义名称的方式，叫做命名路由。示例代码如下：
注意：命名路由的 name 值不能重复，必须保证唯一性！
3-1 使用命名路由实现声明式导航
为 标签动态绑定 to 属性的值，并通过 name 属性指定要跳转到的路由规则。期间还可以用params 属性指定跳转期间要携带的路由参数。示例代码 如下：
3-2 使用命名路由实现编程式导航
调用 push 函数期间指定一个配置对象，name 是要跳转到的路由规则、params 是携带的路由参数：
11.2.9 Vue-cli
9-1 什么是 vue-cli
9-2 安装 vue-cli
vue-cli 是基于 Node.js 开发出来的工具，因此需要使用 npm 将它安装为全局可用的工具：
9-3 解决 Windows PowerShell 不识别 vue 命令的问题
默认情况下，在PowerShell 中执行 vue --version 命令会提示如下的错误消息：
解决方案如下：
① 以管理员身份运行 PowerShell
② 执行 set-ExecutionPolicy RemoteSigned 命令
③ 输入字符 Y ，回车即可
9-4 创建项目
vue-cli 提供了创建项目的两种方式：
4-1 基于 vue ui 创建 vue 项目
步骤1：在终端下运行 vue ui 命令，自动在浏览器中打开创建项目的可视化面板：
步骤2：在详情页面填写项目名称：
步骤3：在预设页面选择手动配置项目：
步骤4：在功能页面勾选需要安装的功能（Choose Vue Version、Babel、CSS 预处理器、使用配置文件）：
步骤5：在配置页面勾选 vue 的版本和需要的预处理器：
步骤6：将刚才所有的配置保存为预设（模板），方便下一次创建项目时直接复用之前的配置：
步骤7：创建项目并自动安装依赖包：
vue ui 的本质：通过可视化的面板采集到用户的配置信息后，在后台基于命令行的方式自动初始化项目：
项目创建完成后，自动进入项目仪表盘
4-2 基于命令行创建 vue 项目
步骤1：在终端下运行 vue create demo2 命令，基于交互式的命令行创建 vue 的项目：
步骤2：选择要安装的功能：
步骤3：使用上下箭头选择 vue 的版本，并使用回车键确认选择
步骤4：使用上下箭头选择要使用的 css 预处理器，并使用回车键确认选择：
步骤5：使用上下箭头选择如何存储插件的配置信息，并使用回车键确认选择：
步骤6：是否将刚才的配置保存为预设：
步骤7：选择如何安装项目中的依赖包：
步骤8：开始创建项目并自动安装依赖包：
步骤9：项目创建完成：
9-5 分析 main.js 中的主要代码
9-6 在 vue2 的项目中使用路由
在 vue2 的项目中，只能安装并使用 3.x 版本的 vue-router。
版本 3 和版本 4 的路由最主要的区别：创建路由模块的方式不同！
6-1 回顾：4.x 版本的路由如何创建路由模块
6-2 学习：3.x 版本的路由如何创建路由模块
步骤1：在 vue2 的项目中安装 3.x 版本的路由：
步骤2：在 src -> components 目录下，创建需要使用路由切换的组件：
步骤3：在 src 目录下创建 router -> index.js 路由模块：
步骤4：在 main.js 中导入路由模块，并通过 router 属性进行挂载：
步骤5：在 App.vue 根组件中，使用 声明路由的占位符：
11.2.10 组件库
10-1 Element UI
Element UI 是饿了么前端团队开源的一套 PC 端 vue 组件库。支持在 vue2 和 vue3 的项目中使用：
⚫ vue2 的项目使用旧版的 Element UI（https://element.eleme.cn/#/zh-CN）
⚫ vue3 的项目使用新版的 Element Plus（https://element-plus.gitee.io/#/zh-CN）
1-1 在 vue2 的项目中安装element-ui
1-2 引入 element-ui
1-3 完整引入
在 main.js 中写入以下内容：
1-4 按需引入
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
步骤1，安装 babel-plugin-component：
步骤2，修改根目录下的 babel.config.js 配置文件，新增 plugins 节点如下：
步骤3，如果你只希望引入部分组件，比如 Button，那么需要在 main.js 中写入以下内容：
1-5 把组件的导入和注册封装为独立的模块
在 src 目录下新建 element-ui/index.js 模块，并声明如下的代码：
11.2.11 axios拦截器
11-1 回顾：在 vue3 的项目中全局配置 axios
11-2 在 vue2 的项目中全局配置 axios
需要在 main.js 入口文件中，通过 Vue 构造函数的 prototype 原型对象全局配置 axios：
11-3 配置请求拦截器
通过 axios.interceptors.request.use(成功的回调, 失败的回调) 可以配置请求拦截器。示例代码如下：
注意：失败的回调函数可以被省略！
3-1 请求拦截器 – Token 认证
3-1 请求拦截器 – 展示Loading 效果
借助于 element ui 提供的 Loading 效果组件（https://element.eleme.cn/#/zh-CN/component/loading）可以方便的实现 Loading 效果的展示：
11-4 配置响应拦截器
通过 axios.interceptors.response.use(成功的回调, 失败的回调) 可以配置响应拦截器。示例代码如下：
注意：失败的回调函数可以被省略
4.1 响应拦截器 – 关闭 Loading 效果
调用 Loading 实例提供的 close() 方法即可关闭 Loading 效果，示例代码如下：
11.2.12 proxy 跨域代理
12-1 回顾：接口的跨域问题
12-2 通过代理解决接口的跨域问题
通过 vue-cli 创建的项目在遇到接口跨域问题时，可以通过代理的方式来解决：
12-3 在项目中配置 proxy 代理
步骤1，在 main.js 入口文件中，把 axios 的请求根路径改造为当前 web 项目的根路径：
步骤2，在项目根目录下创建 vue.config.js 的配置文件，并声明如下的配置：
注意：
① devServer.proxy 提供的代理功能，仅在开发调试阶段生效
② 项目上线发布时，依旧需要 API 接口服务器开启 CORS 跨域资源共享
