1.安装axios模块:(npm不可用的情况下建议使用cnpm
)
cnpm install axios
2.安装声明类型文件:
cnpm install @types/axios
3.检查 tsconfig.json 配置:在 tsconfig.json
文件中的 compilerOptions
加入 axios :
"compilerOptions": {
"types": ["axios"]
}
4.三个步骤都完成才能在main.js中导入 axios 不报错:
import axios from 'axios';
5.在main.js中创建 Axios 实例:
*注意:在 Vue 3 中,使用 Vue.prototype.$http = axios;
这种方式挂载 Axios 到 Vue 实例上会导致报错,因为 Vue 3 的创建实例方式有所改变。
正确的做法是:使用 provide/inject 或者 createApp.config.globalProperties 来实现类似的全局方法或属性的注入。
import axios from 'axios';
const app = createApp(App);
app.config.globalProperties.$http = axios;//main.js全局方法
app.mount('#app');
之后在组件中就可以通过 this.$http
来访问 Axios 实例了。