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
}
]
})