Vue3基础安装以及配置详解
短信预约 -IT技能 免费直播动态提醒
安装vue-cli，选择vue3
vue create Vue3
使用vue ui安装router，axios，vuex
安装完axios后可能会出现终端警告，这时配置以下代码即可运行
main.js
import axios from './plugins/axios'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).use(router).use(axios).mount('#app')axios.js
"use strict";
import axios from "axios";
// Full config: https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
let config = {
baseURL: '路径'
// timeout: 60 * 1000, // Timeout
// withCredentials: true, // Check cross-site Access-Control
};
const _axios = axios.create(config);
_axios.interceptors.request.use(
function(config) {
// Do something before request is sent
return config;
},
function(error) {
// Do something with request error
return Promise.reject(error);
}
);
// Add a response interceptor
_axios.interceptors.response.use(
function(response) {
// Do something with response data
return response;
},
function(error) {
// Do something with response error
return Promise.reject(error);
}
);
export default{
install:function(app){
app.config.globalProperties.axios = _axios;
app.config.globalProperties.$translate = (key) =>{
return key
}
}
}
替换以下代码：
export default{
install:function(app){
app.config.globalProperties.axios = _axios;
app.config.globalProperties.$translate = (key) =>{
return key
}
}
}写好后在组件中引入Proxy，这里在HomeView.vue页面中引入
<template>
<div class="home">
<img alt="Vue logo" class="lazy" data-src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import {getCurrentInstance} from 'vue' // 引入Vue3中的getCurrentInstance
// @ is an alias to /class="lazy" data-src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
mounted(){
const {proxy} = getCurrentInstance();
console.log(proxy);
proxy.axios.get('/home/multidata').then((e)=>{
console.log(e);
})
},
components: {
HelloWorld
}
}
</script>关于Vue3里面的getCurrentInstance
可以获取挂载在全局的属性和获取上下文
打印结果如下：
第二种请求方式：
使用组合式Api
import { getCurrentInstance, onMounted } from "vue";
setup() {
onMounted(() => {
const { proxy } = getCurrentInstance();
console.log(proxy);
proxy.axios.get("/home/multidata").then((e) => {
console.log(e);
});
});
},到此这篇关于Vue3基础安装以及配置详解的文章就介绍到这了,更多相关Vue3基础安装以及配置内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
