vue-cil

vue-cli（俗称：vue脚手架）是 vue 官方提供的。快速生成 vue 工程化项目的工具
特点：

开箱即用
基于 webpack
功能丰富且易于开发
支持创建 vue2 和 vue3 的项目

创建项目

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

// 基于 【命令行】的方式创建 vue 项目
vue create 项目名称

// 基于 【可视化面板】 创建 vue 项目
vue ui

组件库

常用的组件库

PC 端

Element UI
View UI

移动端

Mint UI
Vant UI

Element UI

Element UI 是饿了么前端团队开源的一套 PC 端 vue 组件库。支持在 vue2 和 vue3 的项目中使用

vue2 的项目使用旧版的 Element UI

npm i element-ui -S

vue3 的项目使用新版的 Element Plus

npm install element-plus --save

引入 element-ui

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

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

完整引入 element-ui

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

import Vue from 'vue'
import App from './App.vue'
// 1. 完整引入 element-ui 的组件
import ElementUI from 'element-ui'
// 2. 导入 element-ui 组件样式
import 'element-ui/lib/theme-chalk/index.css'

// 3. 把 ElementUI 注册为 vue 的插件之后，即可在每个组件中直接使用每一个 element-ui 的组件
Vue.use(ElementUI)

new Vue({
    render: h => h(App)
}).$mount('#app')

按需引入 element-ui

借助 babel-plugin-component，可以只引入需要的的组件，以达到减小项目体积的目的
步骤1，安装 babel-plugin-component：

npm i babel-plugin-component -D

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

module.export = {
    presets: ['@vue/cli-plugin-babel/preset'],
    // ⬇ ⬇ ⬇
    plugins: [
        [
            'component',
            {
                libraryName: 'element-ui',
                styleLibraryName: 'theme-chalk'
            }
        ]
    ]
    // ⬆ ⬆ ⬆
}

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

import Vue from 'vue'
import App from './App.vue'
// 1. 按需导入 element-ui 的组件
import { Button } from 'element-ui'

// 2. 注册需要的组件
Vue.component(Button.name, Buttom)
/* 或写为
 * Vue.use(Button)
*/

new Vue({
    render: h => h(App)
}).$mount('#app')

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

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

// ➡ 模块路径 src/element-ui/index.js
import Vue from 'vue'
// 按需导入 element-ui 的组件
import { Button, Input } from 'element-ui'

// 注册需要的组件
Vue.use(Button)
Vue.use(Input)

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

axios 拦截器

请求拦截器

通过 axios.interceptors.request.use(成功的回调, 失败的回调) 可以配置请求拦截器：

axios.interceptors.request.use(function (config) {
    // Do Something before request is sent
    return config
}, function (error) {
    // Do something with request error
    return Promise.reject(error)
})

失败的回调函数可以被省略

// Token 认证
import axios from 'axios'

axios.default.baseURL = 'https://www.xxx.com'
// 配置请求拦截器
axios.interceptors.request.use(config => {
    // 为当前请求配置 Token 认证字段
    config.headers.Authorization = 'Bearer xxx'
    return config
})

Vue.prototype.$http = axios

// 展示 Loading 效果，借助于 element-ui 提供的 Loading 效果组件
// 1. 按需导入 Loading 效果组件
import { Loading } from 'element-ui'

// 2. 声明变量，用来存储 Loading 组件的实例对象
let loadingInstance = null

// 配置请求的拦截器
axios.interceptors.request.use(config => {
    // 3. 调用组件的 service() 方法，创建 Loading 组件实例，并全屏展示 loading 效果
    loadingInstance = Loading.service({ fullscreen: true })
    return config
})

响应拦截器

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

// Add aresponse interceptor
axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response
}, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response data
    return Promise.reject(error)
})

失败的回调函数可以被省略

// 关闭 Loading 效果，通过 Loading 实例提供的 close() 方法
// 响应拦截器
axios.interceptors.response.use(response => {
    // 调用 Loading 实例的 close 方法
    loadingInstance.close()
    return response
})

proxy 跨域代理

接口跨域问题

如果 API 接口没有开启 CORS 跨域资源共享，默认情况下 API 无法请求成功

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

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

把 axios 的请求根路径设置为 vue 项目的运行地址（接口请求不在跨域）
vue 项目发现请求的接口不存在，把请求转交给 proxy 代理
代理把请求根路径替换为 devServer.proxy 属性的值，发起真正的数据请求
代理把请求到的数据，转发给 axios

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

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

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

module.exports = {
    devServer: {
        // 当前项目在开发调试阶段，
        // 会将任何未知请求（没有匹配到静态文件的请求）代理到 https://www.escook.cn
        proxy: 'https://www.escook.cn'
    }
}

devServer.proxy 提供的代理功能，仅在开发调试阶段生效
项目上线发布时，依旧需要 API 接口服务器开启 CORS 跨域资源共享

Vue3-基础（二）