VUE3 ---＞组件化

目录

vue-cli

1、基于 vue ui 创建 vue 项目

 组件库

1.vue 组件库

2.vue 组件库和 bootstrap 的区别

3. 最常用的 vue 组件库

4. Element UI

axios 拦截器

1. 回顾：在 vue3 的项目中全局配置 axios

2. 在 vue2 的项目中全局配置 axios

3、拦截器

4. 配置请求拦截器

5、配置响应拦截器

proxy 跨域代理

1. 回顾：接口的跨域问题

2. 通过代理解决接口的跨域问题

3. 在项目中配置 proxy 代理

---

vue-cli

vue-cli 提供了创建项目的两种方式：

vue create 项目名称

vue ui

1、基于 vue ui 创建 vue 项目

步骤1：在终端下运行 vue ui 命令，自动在浏览器中打开创建项目的可视化面板：

步骤2：在详情页面填写项目名称：

步骤3：在预设页面选择手动配置项目：

步骤4：在功能页面勾选需要安装的功能（Choose Vue Version、Babel、CSS 预处理器、使用配置文件）：

步骤5：在配置页面勾选 vue 的版本和需要的预处理器：

步骤6：将刚才所有的配置保存为预设（模板），方便下一次创建项目时直接复用之前的配置：

步骤7：创建项目并自动安装依赖包：

vue ui 的本质：通过可视化的面板采集到用户的配置信息后，在后台基于命令行的方式自动初始化项目：

版本 3 和版本 4 的路由最主要的区别：创建路由模块的方式不同！

 组件库

1.vue 组件库

在实际开发中，前端开发者可以把 自己封装的 .vue 组件 整理、打包、并 发布为 npm 的包 ，从而供其他人下载 和使用。这种可以直接下载并在项目中使用的现成组件，就叫做 vue 组件库 。

2.vue 组件库和 bootstrap 的区别

二者之间存在本质的区别：

•  bootstrap 只提供了纯粹的原材料（ css 样式、HTML 结构以及 JS 特效），需要由开发者做进一步的组装和改造
•  vue 组件库是遵循 vue 语法、高度定制的现成组件，开箱即用

3. 最常用的 vue 组件库

① PC 端

•  Element UI（https://element.eleme.cn/#/zh-CN）
•  View UI（http://v1.iviewui.com/）

② 移动端

•  Mint UI（http://mint-ui.github.io/#!/zh-cn）
•  Vant（https://vant-contrib.gitee.io/vant/#/zh-CN/）

4. 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、在 vue2 的项目中安装 element-ui

运行如下的终端命令：

npm i element-ui -S

2、引入 element-ui

开发者可以 一次性完整引入所有的 element-ui 组件，或是根据需求，只 按需引入用到的 element-ui 组件：

•  完整引入：操作简单，但是会额外引入一些用不到的组件，导致项目体积过大
•  按需引入：操作相对复杂一些，但是只会引入用到的组件，能起到优化项目体积的目的

3、完整引入

在 main.js 中写入以下内容：

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

4、按需 引入

借助 babel-plugin-component ，我们可以只引入需要的组件，以达到 减小项目体积 的目的。

步骤1，安装 babel-plugin-component：

npm i babel-plugin-component -D

步骤2，修改根目录下的 babel.config.js 配置文件，新增 plugins 节点如下：

{

  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

步骤3，如果你 只希望引入部分组件 ，比如 Button，那么需要在 main.js 中写入以下内容：

import { Button, Select } from 'element-ui';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

5、把组件的导入和注册 封装为独立的模块

在 src 目录下新建 element-ui/index.js 模块，并声明如下的代码：

import Vue from 'vue'
// 完整引入 Element UI
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// Vue.use(ElementUI)

// 按需导入
import { Button, Input } from 'element-ui'

Vue.config.productionTip = false

Vue.use(Button)
Vue.use(Input)

//在mian.js中导入
 import './element-ui'

axios 拦截器

1. 回顾：在 vue3 的项目中全局配置 axios

在 main.js 入口文件中，通过 app.config.globalProperties 全局挂载 axios

import axios from 'axios'
axios.defaults.baseURL = '请求根路径'
app.config.globalProperties.$http = axios

2. 在 vue2 的项目中全局配置 axios

需要在 main.js 入口文件中，通过 Vue 构造函数的 prototype 原型对象全局配置 axios：

import axios from 'axios'
//全局配置
axios.defaults.baseURL = '请求根路径'
Vue.prototype.axios = axios

3、拦截器

拦截器（英文：Interceptors）会在每次发起 ajax 请求和得到响应的时候自动被触发。

4. 配置请求拦截器

通过 axios.interceptors.request.use(成功的回调, 失败的回调) 可以配置请求拦截器：注意：失败的回调函数可以被省略！

请求拦截器 – Token 认证

// 配置请求拦截器
axios.interceptors.request.use(config => {
  // 配置 Token 认证
  config.headers.Authorization = 'Bearer xxx'
  console.log(config)
  // 这是固定写法
  return config
})

请求拦截器 – 展示 Loading 效果

借助于 element ui 提供的 Loading 效果 组件（https://element.eleme.cn/#/zh-CN/component/loading） 可以方便的实现 Loading 效果的展示：

import { Loading } from 'element-ui'
/ 配置请求拦截器
let loadingInstance = null
axios.interceptors.request.use(config => {
  // 展示 loading 效果
  loadingInstance = Loading.service({ fullscreen: true })
  // 配置 Token 认证
  config.headers.Authorization = 'Bearer xxx'
  console.log(config)
  // 这是固定写法
  return config
})

5、配置响应拦截器

通过 axios.interceptors.response.use(成功的回调, 失败的回调) 可以配置响应拦截器。

响应拦截器 – 关闭 Loading 效果

调用 Loading 实例提供的 close() 方法即可关闭 Loading 效果

// 配置响应拦截器
axios.interceptors.response.use(response => {
  // 关闭 loading 效果
  loadingInstance.close()
  return response
})

proxy 跨域代理

1. 回顾：接口的跨域问题

vue 项目运行的地址： http :// localhost : 8080 /

API 接口运行的地址： https :// www.escook.cn /api/users

由于当前的 API 接口 没有开启 CORS 跨域资源共享，因此默认情况下，上面的接口 无法请求成功 ！

2. 通过代理解决接口的跨域问题

通过 vue-cli 创建的项目在遇到接口跨域问题时，可以通过代理的方式来解决：

① 把 axios 的 请求根路径 设置为 vue 项目的运行地址 （接口请求不再跨域）

② vue 项目发现请求的接口不存在，把请求 转交给 proxy 代理

③ 代理把请求根路径 替换为 devServer.proxy 属性的值， 发起真正的数据请求

④ 代理把请求到的数据， 转发给 axios

3. 在项目中配置 proxy 代理

步骤1，在 main.js 入口文件中，把 axios 的请求根路径改造为当前 web 项目的根路径

// 配置请求根路径
// axios.defaults.baseURL = 'https://url地址'
axios.defaults.baseURL = 'http://localhost:8080'

步骤2，在 项目根目录 下创建 vue.config.js 的配置文件，并声明如下的配置：

module.exports = {
  devServer: {
    proxy: 'https://url地址',
  },
}

注意：

① devServer.proxy 提供的代理功能， 仅在开发调试阶段生效

② 项目上线发布时，依旧需要 API 接口服务器 开启 CORS 跨域资源共享