天天看點

Vue引入axios和element-UI

Vue引入axios和element-UI

引入axios

  1. 輸入指令

    npm install axios

    引入依賴
  2. 再輸入指令

    npm install --save axios vue-axios

  3. 配置模闆
    import Vue from 'vue'
    import axios from 'axios'
               
  4. 在腳手架裡面的用法
    Vue.axios.get(api).then((response) => {
    	  console.log(response.data)
    	})
    	 
    	this.axios.get(api).then((response) => {
    	  console.log(response.data)`在這裡插入代碼片`
    	})
    	 
    	this.$http.get(api).then((response) => {
    	  console.log(response.data)
    	})
    	
               

引入Element-UI

  1. 輸入指令

    npm install --save element-ui

    引入依賴

最後

貼一下我的main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import 'es6-promise/auto';
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios';

Vue.use(ElementUI);
Vue.prototype.$http = axios;
// 攔截響應response,并做一些錯誤處理
axios.interceptors.response.use((response) => {
  const data = response.data;
  return data;
}, function (err) {
 // console.log(err.response.status);
   if (err.response.status == 404) {
     router.replace({
       path: "/login"
     });
   }
});

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

           

需要執行的指令:

npm install axios
npm install --save axios vue-axios
npm install --save element-ui
npm install es6-promise --save

           
vue