一、做項目基本流程:
1、規划組件結構
Nav.vue
Header.vue
Home.vue.....
2、編寫對應路由
vue-router
3、具體些每個組件功能
一些公共的文件jquery,jquery插件,一般在index.html文件里面引用
分析項目需要的模塊:
vuex vue-router axios
assets: 放置 靜態文件 image,css,js
二、
watch:{//用來監視路由發生變化時觸發
$route(to,from){
console.log(to.path)//to將要去的路由,from為原路由
if(to.path=='/user-info'){
this.$store.dispatch('show-header')//觸發actions
}
}
}
---------------------------------------------------
三、axios:可以配置
axios不能Vue.use(axios)
axios.interceptors.request.use();//發送請求配置
axios.interceptors.response.use();//接收請求配置
axios.interceptors.request.use(function (config) { //配置發送請求的信息
stores.dispatch('showLoading')
return config;
}, function (error) {
return Promise.reject(error);
});
axios.interceptors.response.use(function (response) { //配置請求回來的信息
stores.dispatch('hideLoading')
return response;
}, function (error) {
return Promise.reject(error);
});
將axios放在vue的原型上
Vue.prototype.$http = axios //其他頁面在使用axios的時候直接 this.$http就可以了
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';設置axios post頭部信息,使用表格格式傳輸