Heim > Web-Frontend > js-Tutorial > Hauptteil

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

php中世界最好的语言
Freigeben: 2018-05-23 10:41:29
Original
4339 Leute haben es durchsucht

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) 
    }) 
   }    
}
Nach dem Login kopieren

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好像不需要了,已经自带)
Nach dem Login kopieren

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
Nach dem Login kopieren

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;
 }
}
Nach dem Login kopieren

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
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage