最近vue3.0 逐渐进入视线，想配置一个自己的模版，于是又从最简单的开始了

安装axios

axios已经被大家所熟知，但是当我重新回头看配置axios的时候发现仍有一些东西值得思考

网上对Vue安装axios版本很多，大致有几个

  1. 在main引入并挂在全局

在文件 main.ts 添加 带有 + 符号后代码

//  main.ts
import { createApp } from "vue";
import App from "./App.vue";
+ import axios from "axios";

const app = createApp(App);
+ app.config.globalProperties.$http = axios;
app.mount("#app")

事实上这样并不能成功的在ts项目中使用，因为找都不到this.$http

在文件 shims-vue.d.ts添加 带有 + 符号后代码

//  shims-vue.d.ts

declare module "*.vue" {
  import { defineComponent } from "vue";
  const component: ReturnType<typeof defineComponent>;
  export default component;
}

+ declare module "@vue/runtime-core" {
+  import { AxiosInstance } from "axios";
+  interface ComponentCustomProperties {
+    $http: AxiosInstance;
+  }
+ }

这样才能正常使用

  1. 直接在component中引用axios

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import axios from "axios";
</script>

这种方法简单粗暴，不做过多介绍

  1. 使用vue-axios

网上很多教程中会推荐使用一个vue-axios的库，比较好奇为什么这么受欢迎，看了看源码，算上ts加起来可能也就一百多行，却能换来1.7kStar

让我们感受其魅力所在

先贴源码

import semver from 'semver';

(function () {
/**
 * Install plugin
 * @param app
 * @param axios
 */

function plugin(app, axios) {
  if (plugin.installed) {
    return;
  }

  if (!axios) {
    console.error('You have to install axios');
    return;
  }

  if (semver.valid(app.version) == null) {
    console.error('Unkown vue version');
    return;
  }

  plugin.installed = true;

  if (semver.lt(app.version, '3.0.0')) {
    Object.defineProperties(app.prototype, {

      axios: {
        get: function get() {
          return axios;
        }
      },

      $http: {
        get: function get() {
          return axios;
        }
      }

    });
  } else {
    app.config.globalProperties.axios = axios;
    app.config.globalProperties.$http = axios;
  }

  app.axios = axios;
  app.$http = axios;
}

if (typeof exports == "object") {
  module.exports = plugin;
} else if (typeof define == "function" && define.amd) {
  define([], function(){ return plugin });
} else if (window.Vue && window.axios) {
  Vue.use(plugin, window.axios);
}
})();

首先是按照Vue的插件文档来写的，直接绑在原型链上不是不可以，如果像方法1这样注册一个$http，和项目其他成员协作的时候就必须注明你注册的变量名称，而使用vue-axios大家可能就没有歧义。

说白了，使用vue-axios更多是为了符合规范，并且方便协作吧。

按照Vue的插件文档来写, 更符合 Vue 整体生态环境, vue-axios 是将 axios 集成到 Vue.js 的小包装器，可以像插件一样进行安装