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 (生产环境打包)
初学者可以深度的了解 如何写组件，并且理解如何应用vuex使用方法
