vue全家桶实战篇

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

该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">

         

       

登录钩子 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  写的下拉上拉刷新组件简单粗暴

      @loadMore="changePage"

      :pageObj="pageObj"

      :isNoMore="isNoMore"

      :header="header"

      ref ="loadMore"

>

   

应用启动步骤

npm install

npm install vuedraggable  （下载vuedraggable）

npm install vue2-better-scroll --save  （下载 better-scroll ）

npm run dev (本地开发)

npm run build (生产环境打包)

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

github地址

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