Vue3-基础(二)

3次阅读
没有评论

共计 3460 个字符,预计需要花费 9 分钟才能阅读完成。

vue-cil

vue-cli(俗称:vue脚手架)是 vue 官方提供的。快速生成 vue 工程化项目的工具

特点:

  1. 开箱即用
  2. 基于 webpack
  3. 功能丰富且易于开发
  4. 支持创建 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 拦截器

Vue3-基础(二)

请求拦截器

通过 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 无法请求成功
Vue3-基础(二)

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

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

  1. 把 axios 的请求根路径设置为 vue 项目的运行地址(接口请求不在跨域)
  2. vue 项目发现请求的接口不存在,把请求转交给 proxy 代理
  3. 代理把请求根路径替换为 devServer.proxy 属性的值,发起真正的数据请求
  4. 代理把请求到的数据,转发给 axios
Vue3-基础(二)

步骤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 跨域资源共享

正文完
 0
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-21发表,共计3460字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码