【Vue】第五篇

Vue学习第五篇

• [1. Vue引入第三方](#1. Vue引入第三方)
• [2. Axios网路请求](#2. Axios网路请求)
• • [2.1 axios基本实现](#2.1 axios基本实现)
  • [2.2 Axios网络请求封装](#2.2 Axios网络请求封装)
  • [2.3 网络请求跨域解决方案](#2.3 网络请求跨域解决方案)
• [3. Vue引入路由配置](#3. Vue引入路由配置)
• • [3.1 Vue引入路由基本实现](#3.1 Vue引入路由基本实现)
  • [3.2 路由传递参数](#3.2 路由传递参数)
  • [3.3 嵌套路由配置](#3.3 嵌套路由配置)
• [4. Vue状态管理(Vuex)](#4. Vue状态管理(Vuex))
• • [4.1 Vuex基本实现](#4.1 Vuex基本实现)
  • [4.2 Vue状态管理核心(Vuex)](#4.2 Vue状态管理核心(Vuex))
• [5. Vue3新特性](#5. Vue3新特性)
• [6. Vue3加载Element-Plus](#6. Vue3加载Element-Plus)
• • [6.1 全局引入和按需引入](#6.1 全局引入和按需引入)
  • [6.2 引入Element-plus字体图标](#6.2 引入Element-plus字体图标)

1. Vue引入第三方

第三方：不属于Vue但是在Vue中能直接使用的，最常用的就是轮播图 。

故本节以轮播图为例。
一个优秀的框架，是否决定它优秀，也要看它的第三方是否足够多。
轮播图：

温馨提示：

在Vue中使用Swipper：

Swiper官方网址：https://swiper.com.cn
不止轮播图，还有很多好的第三方（Vue2官网有）

点击进入：

下面，我们来介绍轮播图的使用。

①安装

在vscode终端输入npm i --save swiper

②基本实现

实操：

效果：

③添加指示器

注意：Swiper 在v10及以上版本中，将导航、分页等模块的导出路径调整到了 swiper/modules 目录下，不再直接从 swiper 根目录导出。

import { Pagination } from 'swiper/modules';

最终效果：

2. Axios网路请求

2.1 axios基本实现

Axios网络请求 是一个基于promise 的网络请求库

（1）安装

同样，它也是第三方，我们先进行安装。

vscode终端输入npm i --save axios

（2）引入

①组件中引入---get版

<script>
import axios from 'axios'

export default {
  name: 'HelloWorld',
  mounted() {
    axios({
      method: "get",
      url:
        "http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php"
    }).then(res => {
      console.log(res.data);
    })
  }
}
</script>

讲解：

①mounted 是Vue的生命周期钩子函数，当组件的DOM元素被渲染到页面上后，会自动执行中国函数里的代码。通常会在mounted中发送请求，因为此时组件已经"准备就绪"，可以操作DOM或处理数据了。

（created也可以，但此时还不可操作DOM）

②method 写请求方式，url 写请求的接口地址

③因axios是基于promise实现，所以用.then ()来处理"请求成功"的情况（如果请求成功，则执行这里的代码）

④res 是接口返回的"响应对象"。

效果：

在页面中显示数据

我们先来看接口数据的格式：

实操：

页面效果

②组件中引入---post版

代码

    //post请求方式
    axios({
      method: "post",
      // 提交登录信息（提交数据）
      url:
        "http://iwenwiki.com/api/blueberrypai/login.php",
      data: {
        user_id: "iwen@qq.com",
        password: "iwen123",
        verification_code: "crfvw"
      }
    }).then(res => {
      console.log(res.data);
    })

但是拿到的数据是不对的

因为网络请求接收参数的类型，并不是对象类型，而是字符串类型，所以要将data的数据类型转为字符串类型

在vscode终端输入npm i --save querystring

实操：

效果：

③快捷方案

接下来来讲全局引入

①先在main.js 中导入axios，创建app实例并挂载Axios

②在Vue组件中使用

2.2 Axios网络请求封装

在日常应用过程中，一个项目中的网络请求会很多，此时一般采取的方案是将网络请求封装起来
src下创建utils 文件夹，在其之下创建request.js
我们先导入axios ，创建一个instance实例对象，最后导出。

是通过axios的create方法 创建一个自己的网络请求对象 。

其中，拦截器 是最常用的。

我们在发送网络请求之前 和获取 到网络请求给我们返回的数据之前 ，

都可以需要把这个请求给拦截一下，做 一些额外的处理。
interceptors：拦截器对象

request：发送

use：方法

用instance.interceptors.request.use 处理拦截器

function：需要有成功的函数、失败的函数

补充：js的对象解构赋值
const response = error.response;

// 传统方式：通过 . 语法获取

而使用解构赋值，写法更简洁
const { response } = error;

// 解构赋值：直接从 error 中提取 response 属性

const errorHandle = (status, info) => {
  switch (status) {
    case 400:
      console.log("语义有误");
      break;
    case 401:
      console.log("服务器认证失败");
      break;
    case 403:
      console.log("服务器拒绝访问");
      break;
    case 404:
      console.log("地址错误");
      break;
    case 500:
      console.log("服务器遇到意外");
      break;
    case 502:
      console.log("服务器无响应");
      break;
    default:
      console.log(info);
      break;
  }
}

errorHandle函数 包含sitch对于各种状态码的监听

用于传递状态码信息status、具体错误信息info
注意：学习时，网站axios看云的文档比较清晰
封装结束之后，就可以直接使用了。

但是使用方式不像我们之前那样直接在组件中写。
①创建一个api文件夹，创建两个文件，
path.js /base.js以及index.js

（utils内的request.js只是网络请求的方法）
path.js统一管理接口地址，让代码更整洁、更容易维护

若接口地址改变，只改 path.js 里的配置，不改组件。
index.js定义具体接口的请求方法，简化组件代码

组件里不用关心接口 URL 是什么，只需要调用 如api.getChengpin() 这个方法就行。
utils/request.js写统一调用一个网络请求的解决方案

api/path.js写众多路径，

api/index.js写众多的网络请求方法，都可以放在一个文件里面。
实现逻辑分离：把 "怎么发请求"（utils/request.js）、"请求哪里"（api/path.js）、"具体哪个接口"（api/index.js）拆分开，代码更清晰。
utils/request.js 是 "网络请求的方法"，因为它的核心作用是封装网络请求的逻辑和工具函数 ，提供了一套可复用的 "方法" 来处理前端与服务器的通信，本质是对 axios 的 "方法封装" （基于axios二次封装）

它规定了网络请求的 "规则和方式"------ 比如用什么工具发请求、请求格式是什么、遇到错误怎么处理等，相当于给 "发请求" 这件事定了一套标准流程。

②path.js内创建base变量 （定义一个配置对象），
把所有的路径都写入，并导出对象base

baseUrl：公共路径

chengpin：具体接口的路径

请求诚品数据

它们两个一拼就是完整地址，为何要分开呢？

因为 baseUrl是所有接口的公共前缀（基础域名）。
③index.js 引入axios、path.js

在里面定义一个api对象，并导出api对象

定义具体接口获取网络请求的方法

④组件中使用

2.3 网络请求跨域解决方案

"网络请求跨域" 是浏览器 的一种安全限制机制（称为 "同源策略"）导致的现象 。

简单说：当一个网页面对另一个不同 "源" 的服务器发送请求时，浏览器会阻止这个请求，这就是跨域。


如下图所示

解决方案（我们主要针对前台处理）

实操①：

写入协议、域名、（端口，默认可不写）
实操②：Vue组件中，删除前面的公共前缀（处理过的）

3. Vue引入路由配置

3.1 Vue引入路由基本实现

路由的作用：管理页面之间的关系，如页面间的跳转

（以前使用href标签进行跳转）
传统href是 "多页应用" 的跳转方式，通过重新加载页面实现跳转，体验和性能较差。

前端路由是 "单页应用" 的核心，通过切换组件实现无刷新跳转，解决了href的痛点，支持复杂交互和状态管理。


如果创建项目的时候，选中Router，则会集成该功能在里面。

vue-router文档学习入口

①安装

②配置独立的路由文件

创建router文件夹 ，下设index.js文件

先导入创建路由的两个核心工具，创建路由实例对象

创建两个页面，引入到index.js 当中。

定义路由规则 ：创建一个数组 ，来承载两个页面的配置 ,

每个配置是个对象类型

path：希望通过什么样的路径去访问它

component：对应的组件
配置数组 需要扔到路由的对象当中以及history访问方式

然后导出对象router

③引入路由到项目中 。

在主入口文件main.js引入


④指定路由显示出口

App.vue中写上路由的显示出口router-view

⑤指定路由跳转

这里是在App.vue中写

实操：

效果：

点击首页，路由跳转到/，显示首页

点击关于，路由跳转到about，显示关于页面

跳转时不会刷新整个页面，只会替换页面中router-view标签的内容（这就是单页应用的无刷新体验）
补充说明

路由模式
createWebHistory基于HTML5的history.pushState()API实现。当用户通过前端导航（如点击按钮）跳转时，路由会通过pushState()修改URL，并手动渲染对应组件，不会向服务器发送请求，因此不会有问题。

但当用户直接在浏览器地址栏输入网址并回车，或刷新页面，浏览器会认为这是一个新的页面请求，会直接向服务器发送请求，如果后端没有配置/about这个路径的处理规则，则会默认返回404错误。（因为后端根本没有about.html这个文件）

实际上，我们需要服务器无论收到说明路径的请求，都返回单页应用的入口文件index.html，让前端路由接手处理URL并渲染对应组件。
后端重定向的作用：将所有前端路由路径的请求都重定向到index.html

3.2 路由传递参数

跳转的是同一个页面 ，怎么让它显示不同的数据

------根据某一个参数 来进行处理

创建一个新闻页面，引入路由参数配置 ，App.Vue上显示

补充：异步加载方式：如果这个页面没有被显示出来，这个代码是不会被执行的
如果我们把所有的页面都在顶部引入进来了，

那么这个组件不管有没有被引用，都会被加载引入进来，

这样一来，如果页面多内容多则容易造成卡顿。

所以说我们一般除了首页会在这顶部直接引入之外，

剩下的页面都会使用异步加载方式引入。

这可以让首页的加载速度更快一些。

（有很多项目对于首页的加载速度是有要求的，

比如，百度的搜索引擎）

接下来，进入正文

①在路由配置中指定参数的key

这里指定key为name

②在跳转过程在携带参数


③在详情页面读取路由携带的参数

3.3 嵌套路由配置

有两个导航

①创建子路由要加载显示的页面

②在路由配置文件中添加子路由配置

③指定子路由显示位置

效果：


④添加子路由跳转链接

效果



但是一般都是默认显示第一个

（即点击About，显示其子组件内容，

并默认显示关于我们的内容）
⑤重定向

4. Vue状态管理(Vuex)

4.1 Vuex基本实现

状态管理，可以简单理解为，组件与组件之间的数据管理

简言之，集中式管理 ，任何组件都可以按照指定的方式进行读取和改变数据

从前只能父子之间通信

①安装

同理，也可以像路由一样直接导入

手动配置则如下图所示：

可查阅官方文档

②配置Vuex文件

创建新文件夹store，在其之下创建index.js文件

在index.js文件内写入如下内容：



③在主文件中引入Vuex

④在组件中读取状态

4.2 Vue状态管理核心(Vuex)

Vuex最重要的点------可以对这些数据 进行同步地修改 。

即组件遵循一种规则，然后按这种规则去修改Vuex中的数据，其他组件都可以同时得到响应。

补充：内层是HelloWorld,vue，外层是App.vue

①Getter

对Vuex中的数据进行过滤 ：对读取的方式提供一种更合理的方式。

state里的数据 可能不是页面想要 ，所以增加getters对数据进行过滤。

Getters内定义方法对数据进行处理。

过滤后读取：

法一：

法二：

（p标签要写上）

结果是显示：count=数据异常
Vuex不仅可以读取数据，还可以修改数据。
使用②Mutation 更改数据：

定义方法来进行数据修改，默认state为第一个参数。
实操：通过Mutation里的方法来更改Vuex中的数据

组件中调用

效果

点击增加后：

还有个优势就是，任何对count所引用的组件，都会得到相应的变化
在About页面组件也显示count

（用getters是因为需要处理后的数据，正常state也可）
实操

主页面增加到count=6：

about页面 的count也一样到6了：
还可以传递参数


效果

点击添加后

当然，这种方式调用起来比较麻烦，Vuex还提供了一种快捷方案：

实操

点击增加按钮后，

③Action，可异步

Action和Mutation是一个意思，但不同的是Mutation内只允许同步操作，不允许异步操作。

提交数据，Action也是把数据提交给Mutation，Mutation再去更改
外部调用asyncAddCounter方法而不再是addCounter

数据来源于网路请求，也不再来源于页面中自己传递。

补充知识点：对象解构赋值

// 解构赋值的过程等价于：
const commit = context.commit;

页面调用补充知识点：

效果：

查看后端API接口

前端页面显示：本来是1，点击异步增加变为1011

同样，它也有快捷方案

5. Vue3新特性

Vue2到Vue3，是版本的升级。

相当于微信5.0到6.0

Vue3的六大亮点

Vue的底层源码，以前是用JS写的，现在改成了TS。
新特性1：ref和reactive
新特性2：setup ，方法与变量写入其中（data和methods）

以前是拿取data的数据，现在是直接在setup中声明，且使用的是ref和reactive

日后在setup中所声明的变量，外部想访问，都必须return

效果：

一般我们用reactive 声明对象类型的数据，

或者复杂数据类型的数据

修改：定义一个方法修改

效果：

按下按钮后

新特性3：props 组件传递数据，context 是当前对象

实操：

子组件，setup接收数据（props要定义）

console.log(props.msg)则打印"数据"
setup中没有this关键字，

如果想获取当前实例对象，使用ctx，即context

控制台：

emit自定义事件

attrs属性

slots插槽
新特性4：setup中使用生命周期函数


实操：

优势：同一个生命周期函数可以存在多个。

为什么是优势？

因为生命周期的使用频率很高，日后很多业务都会放在这个生命周期函数当中。

如果把特别多的业务都放在同一个内，后续整理起来会比较乱。

但是如果是一个函数放一个业务，拆分多个业务便会很清晰。

新特性5：Provide/Inject

关于组件间的数据传递。

下文的，Vue2也有，只是Vue2的时候很少有人用。

Vue3时候，这个东西得到了增强，所以Vue3的使用率高一些。


实操

必须由上至下

中间再多几层组件也可。

Provide/Inject：跨任意层级传递 ， 可以实现祖先组件 → 任意深层后代组件 的数据传递，无需中间层组件转发。

祖先组件用 provide 提供数据，任意后代组件用 inject 接收，直接跳过中间层。

Provide/Inject 的传递关系是隐式的：祖先组件提供数据时，不需要知道哪些后代会使用；后代组件接收时，也不需要知道数据来自哪个祖先，只能通过约定的key关联。
新特性6：Fragment

实操

6. Vue3加载Element-Plus

6.1 全局引入和按需引入

Element组件库针对Vue2，Element-Plus组件库针对Vue3

①安装

②全局引入

实操：

③使用

复制element-plus的组件代码

实操1：按钮

效果：

实操2：switch开关按钮

实操：

注意，它的语法是用TS写的，我们需要把它改为JS

如下：

效果：

所有组件安装官方文档方式复制使用即可。
④按需引入

复制下来，并写到vite.config.js中

最后一步，同全局引入

6.2 引入Element-plus字体图标

字体图标需要额外安装
①安装

②全局注册

③引入

④使用