芯が強い人になるESTJ-A

# vue-cliでaxiosを使用する

IT開発 Tags: 无标签 阅读: 160

vueで非同期通信を行う際に手段はいろいろとありますが、axiosの使用が推奨されているようです。
CDNでの導入方法はたくさんありましたが、vue-cliでの導入に手こずったため備忘録としての記事になります。

すでにnode・npm・vue-cli環境が整っており、vueプロジェクトが存在していること

axiosとvue-axiosをインストール

npm install --save axios vue-axios

main.jsにてインポート

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import Router from './router'
import './assets/css/base.css'
import './assets/css/index.css'
//顺序一定要这么写VueAxios,axios,写反了,无法显示。
Vue.use(VueAxios,axios);
Vue.config.productionTip = false

new Vue({
  router:Router,
  render: h => h(App),
}).$mount('#app')

設定としては以上になります。これでaxiosを使用できるようになっているはずです。

使い方,router.js

import Vue from 'vue'
import Router from 'vue-router'
import Cart from './pages/cart.vue'
import Address from './pages/address.vue'

Vue.use(Router);
export default new Router({
  routes:[
    {
      path:'/',
      name:'cart',
      component:Cart
    },
    {
      path:'/address',
      name:'address',
      component:Address
    }
  ]
})