- 步骤指引：

（n）指示代码下对方有对应解释或备注

1. 先进行axios的依赖安装

npm i axios   （*1*）

（1）这里大可不必用 npm i axios -S 命令，因在npm 5.0.0 之后， --save已经变成内置参数，会自动加载到devDependencies对象里，当然，如果你的npm版本较低，当我没说。
这里还有一个版本命令为： npm install axios vue-axios

2. 在main.js中加入以下代码

import {createApp} from 'vue'  
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import Axios from 'axios';   （2）

const app = createApp(App)   （3）
Axios.defaults.baseURL = '/api'  （4）
app.config.globalProperties.Axios=Axios  （5）

app.use(router).use(ElementPlus, {
  locale: zhCn,
}).mount('#app')

（2）这里进行axios的文件引入，使用 Axios 是为了和 axios 进行区分，避免混淆；
（3）这里是vue3的特别之处,相当于vue2的 Vue
（4）这里是axios请求的默认路径，可以只写/,也可以写 localhost：8080 或根据自己需要添加。如果你出现跨域问题，使用proxy代理解决，请在这里加上 '/api'
（5）此处axios不再支持通过Vue.use()进行挂载，故需要通过其它方法解决；在vue3中是通过创建全局变量来实现，即用app.config.globalProperties来挂载axios全局方法，在vue2中，使用的是 Vue.prototype.$ajax = axios 即通过 Vue.prototype属性使在组件中可通过this调用此处axios方法；

3. 在组件中使用axios进行get/post请求

created() {
    var api="https://api.coindesk.com/v1/bpi/currentprice.json";   （6）
      //2.使用axios 进行get请求
      this.Axios.get(api).then((res)=>{   （7）
        //请求成功的回调函数
        console.log(res)
      }).catch((err)=>{
        //请求失败的回调函数
        console.log(err)  
      })
  }

（6）此处是请求axios的接口路径，如果你完整填入接口路径后，出现跨域问题，此时应该考虑通过proxy进行代理域名，此处需要做的就是将接口域名去掉即修改为：

 var api="/v1/bpi/currentprice.json";

此时还应注意另一种写法：

 var api="/api/v1/bpi/currentprice.json";

区别在于在vue.config.js的配置不同，如果你在vue.config.js中进行重写地址，请使用第一个；

（7）这里直接使用 this.Axios 进行get/post进行请求，无需进行 getCurrentInstance 的注册（会出问题）

4. 出现跨域情况的解决

在项目运行地址域名和接口的地址域名不一致的情况下，往往会出现跨域问题，在项目中前端解决方案一般为通过proxy代理进行解决；

4.1 vue3项目中，因vue-cli3中，对webpack进行高度集成，故不再自动生成vue.config.js文件，但任然可以通过自建文件进行修改webpack.config

4.2 在项目根目录下创建vue.config.js文件，并写入一下代码

module.exports = {
  devServer: {
    port: 8080,  （8）
     proxy: {
       '/api': {
             target: 'https://api.coindesk.com/',  	（9）
             pathRewrite:{'^/api':'/'},			（10）
             ws: false,					（11）		
             changeOrigin: true			        （12）		
       }
     }
   },
}

（8）这里填入你的项目端口
（9）这里是你要代理的接口域名；看清嗷，是域名（ip），不是接口地址!
（10）这里是通过pathRewrite重写地址，将前缀/api转为/，就是前面如果加了这里，请求api时候就不用加/api了；
（11）是否启用websockets，一般默认false
（12）这里是开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题；即在组件里请求的地址，会自动编译成 127.0.0.1:8080//v1/bpi/currentprice.json,这样即代理成功；接口可正常访问拉取数据。

简单使用vue3+cli3进行axios的引入和使用

- 步骤指引：

1. 先进行axios的依赖安装

2. 在main.js中加入以下代码

3. 在组件中使用axios进行get/post请求

4. 出现跨域情况的解决