🤔npm install 与 vue add 的区别

npm install

npm是基于node.js的包管理器, 使用npm install可以方便的在vue项目的node_modules文件夹中加入依赖包
但是npm并无更高的"权限"去修改vue-cli构建的项目的项目文件,所以使用npm安装的依赖包通常需要用户自行在main.js中配置依赖

vue add

vue add是vue-cli的内置命令, 其作用是将vue插件安装到vue-cli构建的项目中, 这通常使得vue项目的目录结构以及某些代码发生变化

以axios为例
使用vue add安装axios时, vue-cli会在项目中创建/plugins/axios.js文件,并在main.js中自动加入import

🎰如何使用不同方式安装axios, 他们有什么区别

使用npm install 安装axios

原型链方法

我们可以通过以下命令安装axios
npm install --save axios
因为axios.js文件中并不存在install方法, 所以我们在安装后并不能直接使用vue.use();方法进行装载
所以我们要使用的话需要对其进行封装, 将其加入vue的原型链中(main.js)
Vue.prototype.$http = axios(Vue2适用, Vue3似乎不行)

极不推荐

使用方法:

axios.get("地址").then((response)=>{});

vue-axios方法

也有大神制作了小工具帮助导入
我们只需要在安装axios的同时加入vue-axios
npm install --save axios vue-axios
然后在main.js中加入

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

即可在其他地方使用axios

推荐

使用方法:
Vue.axios.get("地址").then((response)=>{});

具体参考文章axios和vue-axios的关系

使用vue add安装axios插件

vue add强大的插件功能可以让我们简化axios的安装流程
我们只需要在项目根目录下运行
vue add axios
即可将其安装到vue项目中

使用方法:

this.axios.get("地址").then((response)=>{});

🎉axios的简单使用

此处以vue add 方法安装的axios为例

配置基础地址

在/plugins/axios.js中可以配置axios交互的基本地址, 可以为一个或多个

let config = {
//配置基本地址, 若有多个地址则用 || 隔开
  baseURL: "http://bing.com || http://baidu.com",
 //设置超时时间
  timeout: 60 * 1000, // Timeout
  // withCredentials: true, // Check cross-site Access-Control
};

使用

配置基础地址后就可以在其他地方使用axios获取数据了

this.axios.get("除了基础地址以外的字符串").then((response)=>{
	console.log(response);
});

ps: 似乎有多个地址的时候 axios会自动判断应该拼接到哪个基本地址上