码迷,mamicode.com
首页 > 其他好文 > 详细

vue项目基本流程

时间:2018-01-20 17:52:01      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:页面   jquery插件   default   bsp   配置   encode   actions   tor   orm   

一、做项目基本流程:

    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头部信息,使用表格格式传输

 

vue项目基本流程

标签:页面   jquery插件   default   bsp   配置   encode   actions   tor   orm   

原文地址:https://www.cnblogs.com/qdcnbj/p/8319872.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!