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 installnpm install vuedraggable （下载vuedraggable）npm install vue2-better-scroll --save （下载 better-scroll ）
npm run dev (本地开发)npm run build (生产环境打包)
复制代码
在线预览地址：可通过手机或谷歌浏览器手机版打开查看
github地址
初学者可以深度的了解 如何写组件，并且理解如何应用vuex使用方法
