Detaillierte Erläuterung der Schritte zur Einführung von vue-cli und zur Konfiguration von Axios

Dieses Mal erkläre ich Ihnen ausführlich die Schritte zur Einführung von vue-cli und zur Konfiguration von axios. Was sind die Vorsichtsmaßnahmen für die Einführung von vue-cli und die Konfiguration von axios? Werfen wir einen Blick darauf.

1. Installieren Sie Axios mit npm, installieren Sie es im Dateistammverzeichnis. Die Anweisungen lauten wie folgt:

npm install axios --save-dev 

2. Ändern Sie die Prototypenkette und führen Sie Axios ein in main.js

import axios from 'axios' 

Dann schreiben Sie Axios als Prototypattribut von Vue um,

Vue.prototype.$http=axios 

Auf diese Weise kann es Der Befehl $http vervollständigt die Datenanforderung. 3. Verwenden Sie

methods: { 
   get(){ 
    this.$http({ 
     method:'get', 
     url:'/url', 
     data:{} 
    }).then(function(res){ 
     console.log(res) 
    }).catch(function(err){ 
     console.log(err) 
    }) 
     
    this.$http.get('/url').then(function(res){ 
     console.log(res) 
    }).catch(function(err){ 
     console.log(err) 
    }) 
   }    
}

in der Komponente. Klicken Sie auf das folgende Dokument um den Link

unten zu öffnen. Lassen Sie mich Ihnen vorstellen, wie Sie Axios mit Vue-Cli konfigurieren.1.

npm install axios --save2.

npm install @type/axios --save-dev(使用ts编写的需要此声明文件，升级的axios好像不需要了，已经自带)

3 .

Fügen Sie die axios.ts-Datei im src-Verzeichnis hinzu, Inhalt:

import axios from 'axios'
import {Notification} from 'element-ui'
import store from './store/index'
import buildconf from '../config/build.rootpath.js'
axios.defaults.withCredentials = true;
axios.defaults.baseURL = buildconf.serverUrl
// axios.defaults.baseURL = 'http://gsblackwidow.chinacloudsites.cn/'
axios.interceptors.request.use(function(config) {
 // document.getElementById('g-loader').style.display = 'flex'
 store.commit('requestModify', 1)
 return config;
}, function(error){
 return Promise.reject(error)
})
axios.interceptors.response.use(function(response){
 store.commit('requestModify', -1)
 // document.getElementById('g-loader').style.display = 'none' 
 return response.data;
}, function(error){
 store.commit('requestModify', -1) 
 // document.getElementById('g-loader').style.display = 'none'  
 if(error.response.status === 401){
  Notification({
   title: '权限无效',
   message: '您的用户信息已经失效, 请重新登录',
   type: 'warning',
   offset: 48
  });
  window.location.href = '/#/login'
 }else{
  Notification({
   title: '请求错误',
   message: `${error.response.status} \n ${error.config.url}`,
   type: 'error',
   offset: 48,
  })
 }
 return Promise.reject(error)
})
export default axios

4.

Erstellen Sie eine neue vue.d.ts-Datei im Ordner „types“, Inhalt:

import {AxiosStatic, AxiosInstance } from 'axios'
declare module 'vue/types/vue' {
 interface Vue {
  $axios: AxiosStatic;
 }
}

Auf diese Weise können Sie Axios über this.$axios in jedem Modul verwenden

wo in Axios:

1. build.rootpath.js Inhalt:

var path = require('path')
var rootpath = path.resolve(dirname, '../dist')
module.exports = rootpath

2. Der Store ist eine Vuex-Datei, daher müssen Sie Vuex im Voraus installieren

Ich glaube Ihnen Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Zusammenfassung gängiger Algorithmen wie JS-Akkumulation, Iteration, Erschöpfung, Rekursion usw.

Analyse des Einrichtungscodes der React Family Bucket Environment

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Einführung von vue-cli und zur Konfiguration von Axios. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!