Vue3基礎安裝以及配置詳解
安裝vue-cli,選擇vue3
vue create Vue3
使用vue ui安裝router,axios,vuex
安裝完axios后可能會出現(xiàn)終端警告,這時配置以下代碼即可運行
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
}
}
}
/* Plugin.install = function(Vue) {
Vue.axios = _axios;
window.axios = _axios;
Object.defineProperties(Vue.prototype, {
axios: {
get() {
return _axios;
}
},
$axios: {
get() {
return _axios;
}
},
});
};
Vue.use(Plugin)
export default Plugin; */
替換以下代碼:
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" 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 /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基礎安裝以及配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue如何在用戶要關閉當前網(wǎng)頁時彈出提示的實現(xiàn)
這篇文章主要介紹了vue如何在用戶要關閉當前網(wǎng)頁時彈出提示的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
vue3實現(xiàn)alert自定義的plugins方式
這篇文章主要介紹了vue3實現(xiàn)alert自定義的plugins方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
基于Element封裝一個表格組件tableList的使用方法
這篇文章主要介紹了基于Element封裝一個表格組件tableList的使用方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
Vue 父子組件數(shù)據(jù)傳遞的四種方式( inheritAttrs + $attrs + $listeners)
這篇文章主要介紹了Vue 父子組件數(shù)據(jù)傳遞的四種方式( inheritAttrs + $attrs + $listeners),需要的朋友可以參考下2018-05-05
Vue3項目中優(yōu)雅實現(xiàn)微信授權登錄的方法
用戶在微信端中訪問第三方網(wǎng)頁,可以通過微信網(wǎng)頁授權機制獲取用戶的基本信息,進而實現(xiàn)所需要的業(yè)務邏輯,這篇文章主要給大家介紹了關于Vue3項目中優(yōu)雅實現(xiàn)微信授權登錄的相關資料,需要的朋友可以參考下2021-09-09

