Vue 扩展 7

1 Axios

1 基础功能
-------------------------------------------------------------------------------------
1 环境配置: 
  1 安装: npm install axios -S
  2 使用: import axios from 'axios'

2 Axios 基础使用: Tool -> Vue -> Axios -> axios.js

3 Axios 二次封装: Tools -> Vue -> Axios -> fetch.js

4 Axios 二次封装的使用: Tools -> Vue -> Axios -> fetch1.js

5 基于 Axios 二次封装的再次封装: Tools -> Vue -> Axios -> api.js
-------------------------------------------------------------------------------------

2 Axios 跨域请求
-------------------------------------------------------------------------------------
1 说明: 
  1 如下的处理方式, 是在开发过程中的跨域处理方式 (通过本地启动的 node服务器代理, 去请求跨域数据的)
  2 打包上线的时候, 需要重新去做一个配置
  3 请求数据时, 自动检测 baseURL后面的路径, 等于 '/api' 的时候, 就会代理到配置远程服务器 -> 'www.baidu.com'
  

2 LX 跨域简单处理: vue.config.js 中配置 

  1 我们要跨域请求这个地址: https://www.baidu.com/xhr/index.json?xxx=666

  2 代码配置 (vue.config.js)
    module.exports = {
    
    
      devServer: {
    
      // 代表本地服务器配置
        proxy: {
    
      // 前端本地服务器, 代理配置
          '/xhr': {
    
      // '/xhr' == baseURL 后面的第一个路径
            target: 'www.baidu.com',
            changeOrigin: true
          }
        }
      }
    }


3 LT 跨域自定义处理: vue.config.js 中配置 

  1 我们要跨域请求这个地址: https://www.baidu.com/xhr/index.json?xxx=666

  2 重新设置我们的请求地址: http://localhost:8080/hh/xhr/index.json?xxx=666

  3 代码配置 (vue.config.js)
    module.exports = {
    
    
      devServer: {
    
      
        proxy: {
    
     
          '/hh': {
    
    
            target: 'www.baidu.com',  // 发现路径 '/hh' 的时候, 去请求这个域
            changeOrigin: true,
            pathRewrite: {
    
    
              '^/hh': ''  // 把所有以 '/hh' 开头的请求路径中的, '/hh' 去掉
            }
          }
        }
      }
    }

  4 说明: 
    1 我们数据要请求的地址: https://www.baidu.com/hh/xhr/index.json?xxx=666   (target + url)
    2 通过配置过滤后, 实际请求的地址: https://www.baidu.com/xhr/index.json?xxx=666
-------------------------------------------------------------------------------------

UI 组件库

1 简单介绍
-------------------------------------------------------------------------------------
1 作用: 帮助我们快速开发项目

2 PC端: 
  1 Element-UI -- 饿了么出品 (不维护了 -- 新项目基本不会用了)
  2 Ant Design -- 蚂蚁金服出品
  3 View UI -- iView UI前身 -- 不太好 

3 移动端: 
  1 Vant -- 有赞出品
-------------------------------------------------------------------------------------

2 Vant 介绍
-------------------------------------------------------------------------------------
1 文档地址: https://vant-contrib.gitee.io/vant/#/zh-CN/

2 环境搭建: 
  1 npm i vant -S
  2 npm i babel-plugin-import -D   // 自动按需引入, 需要的插件
  3 配置: babel.config.js   // Tools -> Vue -> UI 组件库 -> babel.config.js

3 使用范式 1: 
  1 import vue from 'vue'
  2 import {
    
     Button } from "vant"
  3 Vue.use(Button)
  4 Vant 中复制标签, HTML 结构中粘贴标签

4 使用范式 2: 
  1 import {
    
     Button } from "vant"
  2 [Button.name]: Button  // 注册局部组件
  3 Vant 中复制标签, HTML 结构中粘贴标签

5 使用 UI组件库 -> 注意事项: 
  1 三大部分: 结构 / 变量 / 样式
  2 一定要先搞懂, 基础示例
-------------------------------------------------------------------------------------