Vue全家桶实战篇Vue当我第一次听说还是半年前，那个时候，我还是一名在校的学生。那个时候对vue很感兴趣，但是学校条件

Vue当我第一次听说还是半年前，那个时候，我还是一名在校的学生。那个时候对vue很感兴趣，但是学校条件有限，只能靠自己自学，盲目的学习。时常观看别人发布有关于vue的文章，只为能更快的学习。

该spa是主要技术栈有：

vue + vuex + vue-router + better-scroll + vuedraggable

该spa是基于 mint-ui 来写的。

展示效果图：

vuex 路劲图

路由懒加载

{      path: '/find',      name: 'find',      component: resolve => { require(['@/components/find/find'], resolve) }, hiddent: true, title: '发现' },

路由切换动画并只有主栏有底部tabbar

watch: {    $route(to, from, next) {      this.transitionName = this.$router.isBack ? "slide-right" : "slide-left";      this.$router.isBack = false;
      /**防止每次刷新页面时  登录信息有误 */      let userInfo = ykp.getLocalStorage('userInfo');                    //当路由不在首屏的几个页面是隐藏tabbar        if (          to.path != "/" &&          to.path != "/find" &&          to.path != "/cart" &&          to.path != "/user"        ) {          this.shwoBar = false;        } else {          this.shwoBar = true;        }            this.globel.userInfo = userInfo ? JSON.parse(userInfo) : "";          }  },

transition :name="transitionName">          <router-view  class="view-con child-view" :style="{bottom:shwoBar ? 55+'px' : 0+'px'}"></router-view>     </transition>        <tab-bar v-show="shwoBar"></tab-bar>

登录钩子 vue-router beforeEach 判断当前页面是否需要登录从而做拦截

router.beforeEach((to, from, next) => {    let userInfo = ykp.getLocalStorage('userInfo');    if(to.meta.loginStatus && !userInfo ){      router.push("/login");    } else if (to.meta.loginStatus && to.path !== '/login' && userInfo) {      next();    }  else if (to.meta.loginStatus && to.path === '/login' && userInfo) { // 已经登录且前往的是登录页跳转到首页      router.push("/");    }else if(!to.meta.loginStatus){      next();    }})

vue 使用better-scroll 写的下拉上拉刷新组件简单粗暴

<loadDemo      @loadMore="changePage"      :pageObj="pageObj"      :isNoMore="isNoMore"      :header="header"      ref ="loadMore" >     <articleCom @reloadPage="initPage" :newsList="newsList" :custom="custom"></articleCom>   </loadDemo>

应用启动步骤

npm install
npm install vuedraggable （下载vuedraggable）
npm install vue2-better-scroll --save （下载 better-scroll ）
npm run dev (本地开发)
npm run build (生产环境打包)

在线预览地址：可通过手机或谷歌浏览器手机版打开查看

github地址

初学者可以深度的了解如何写组件，并且理解如何应用vuex使用方法

Vue全家桶实战篇