Vue-cli（Vue腳手架）掛載Element-ui和axios方法

掛載Element-ui

1 . npm安裝：使用npm下載Element-ui包

npm i element-ui -S

2 . 在main.js文件中添加如下代碼：

//引入Element-ui
import Element from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"

//Vue對象使用Element-ui
Vue.use(Element);

//在new Vue中添加組件
new Vue({
  el: '#app',
  router,
  components: {App, Element},
  template: '<App/>'
})

掛載axios

1. npm安裝：使用npm下載axios包

npm i axios
npm i --save axios vue-axios

2 . 在main.js文件中添加如下代碼：

//引入axios
import axios from 'axios'
import VueAxios from 'vue-axios'

//定義$axios（可以不寫，在組件中直接使用axios）
Vue.prototype.$axios= axios;

//Vue對象使用axios
Vue.use(axios);

//在new Vue中添加組件
new Vue({
  el: '#app',
  router,
  components: {App, axios},
  template: '<App/>'
})

3 .在組件中使用(以post請求為例)：

• 定義了$axios的情況下：

this.$axios.post("/user/login",{
    username:"xxx",
    password:"xxx"
}).then(function(res) {
    console.log(res);
}).catch(function(res) {
    console.log(res);
})

• 未定義$axios的情況下：

axios.post("/user/login",{
    username:"xxx",
    password:"xxx"
}).then(function(res) {
    console.log(res);
}).catch(function(res) {
    console.log(res);
})