本贴记录项目实践中,各种功能的实现与技术要点,均有待改进。

路由切换的时候,显示loading动画

目前方案是: 在每个页面都手动装载一个loading组件
组件的显示依赖vuex里面的一个值 , 在router的beforeEach事件里面控制loading的状态

<template>
<div>
<div v-show="isLoading" class="myloading"><van-loading type="spinner" color="white"/></div>
</div>
</template> <script>
export default {
data(){
return {}
},
computed:{
isLoading(){
return this.$store.state.isLoading
}
}
}
</script> <style>
.myloading{
background-color: #666;padding:20px;border-radius:5px;display:inline-block;
position:fixed;z-index:999999;top:50%; left:50%;transform:translate(-50%,-50%);
}
</style>

main.js的router.beforeEach事件:

    //显示loading
store.commit('setLoading',true)
//延迟一会加载页面,让loading效果显示一会。。。
setTimeout(()=>{
next()
},300);

在vuex里面使用axios

vue脚手架3中,vuex是以单文件存在,即store.js,里面要使用axios

需在头部import axios,然后直接调用axios.get...

不知是否最佳姿势的“用户登录-保存状态”的方案

登录页调用vuex里面的action,获取goken,并写入localstorage

    actions: {
login(state){
return new Promise((resolve,reject)=>{
axios.get('/gettoken',{parmas:{}})
.then(function(response){
resolve(response)
localStorage.setItem("userToken",response.data.data)
})
.catch(function(e){
reject(e)
})
})
},
getUserInfo(store,token){
axios.get('/api/userinfo.json',{parmas:{token}})
.then(function(response){
console.log("拉取用户信息成功:",response.data.data)
store.commit('setLoginInfo',response.data.data)
})
.catch(function(e){
console.log(e)
})
}
},

在路由守卫里面,判断是否有token, 则获取用户信息

    let AUTO_LOGIN_TOKEN = localStorage.getItem("userToken")

    // 如果有保存token 就自动登录
if(AUTO_LOGIN_TOKEN != null && AUTO_LOGIN_TOKEN != undefined && AUTO_LOGIN_TOKEN != 'undefined'){
console.log('token正常:',AUTO_LOGIN_TOKEN)
if(store.getters.isLogin==0){
console.log('准备自动登录,拉取用户信息。。。')
store.dispatch('getUserInfo',AUTO_LOGIN_TOKEN)
}
}

关于生命周期和dom操作的一点事儿

项目中需要做一个仿app启动页,可以滚动的广告,并且有倒计时显示

    mounted(){
//倒计时跳过
let timehandler = setInterval(()=>{
this.countdown --
if(this.countdown<=0){
this.$router.push('home')
clearInterval(timehandler)
}
},1000)
},
updated(){
//要放在updated里面,因为这里才完成dom渲染
if(!this.Myswiper){
console.log('初始化swiper');
this.Myswiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
clickable:true
},
autoplay:{
delay:10000
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop: false,
spaceBetween:0
});
} },

总结:

1、因为倒计时的时候,页面上也会显示剩余时间,每次都会触发updated事件,倒计时操作如果放在updated里面会出乱子

2、初始化swiper必须等dom都准备好,因为dom异步数据获取 之后刷新的,所以也要放在updated里面(用nextTick事件应该也可以解决)
 但是有一点,上面定时器每次刷新时间都会触发updated,只要把swiper对象,挂到vue实例中,判断一下即可

计算属性的坑点

这里有2种方式,使用哪一种看情况而定,如果是第一种,不能在forEach的回调里面return

回调也是一个函数,里面return 和 外面的函数return是两码事

第二种直接在for里面return,作用域是在curScrollIndex中,所以生效

    computed:{
curScrollIndex(){
//方式 1
let returnValue = 0
this.foodsLiHeight.forEach((val,index)=>{
if(this.curScrollposY >= this.foodsLiHeight[index] && this.curScrollposY < this.foodsLiHeight[index+1]){
console.log('计算属性:',index)
returnValue = index
} })
return returnValue
// 方式 2
for(let i=0;i<this.foodsLiHeight.length;i++){
if(this.curScrollposY >= this.foodsLiHeight[i] && this.curScrollposY < this.foodsLiHeight[i+1]){
console.log('计算属性:',i)
return i
}
}
}
},

关于使用全局Less

less很方便,设置好变量,方法,打算在main.js引入less文件,在各子组件中直接使用

但是无实现,经查阅,应该是webpack机制还无法实现

参考:https://segmentfault.com/q/1010000010811479

单页路由切换后,滚动高度不变的"BUG"

切换了路由,滚动高度会继续上一个路由页面的数值
在router实例中加入官方文档说的scrollBehavior,不知为何无效,也不想去折腾它

那只能用最原始的办法,在路由的beforeEach中做手脚:

router.beforeEach((to, from, next) => {
console.log('beforeeach事件:',document.body.scrollTop)
document.documentElement.scrollTop = 0;
next()
});

这里要注意,使用了DTD文档头,要使用document.documentEelement.scrollTop

Vue项目实践中的功能实现与要点的更多相关文章

  1. Vue项目之实现登录功能的表单验证!

    Vue项目之实现登录功能的表单验证! 步骤: 配置 Form表单验证; 1.必须给el-from组件绑定model 为表单数据对象 2 给需要验证的表单项 el-form-item 绑定 prop 属 ...

  2. webpack搭建vue项目,实现脚手架功能

    本文基于node.js开发环境,安装完node之后新建项目,通过webpack配置,实现vue-cli脚手架功能 对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思 ...

  3. webpack 创建vue项目过程中遇到的问题和解决方法

    目录 1 webpack简介 2 webpack实现多个输入输出多个html 3  webpack 中的module下rules 下的use和loader选项 4 webpack 文件更新,如何使页面 ...

  4. prerender-spa-plugin预处理vue项目实践

    由于公司想要把商城做由之前的php和前端混合开发改版为前后端分离,所以拿现在手上的vue项目来实践一下 https://github.com/chrisvfritz/prerender-spa-plu ...

  5. 项目实践中--Git服务器的搭建与使用指南(转)

    一.前言 Git是一款免费.开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理.在平时的项目开发中,我们会使用到Git来进行版本控制. Git的功能特性: 从一般开发者的角度来 ...

  6. vue项目webpack中Npm传递参数配置不同域名接口

    项目开发中,前端在配置后端api域名时很困扰,常常出现:本地开发环境: api-dev.demo.com测试环境: api-test.demo.com线上生产环境: api.demo.com, 这次是 ...

  7. 项目实践中--Git服务器的搭建与使用指南

    一.前言 Git是一款免费.开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理.在平时的项目开发中,我们会使用到Git来进行版本控制. Git的功能特性: 从一般开发者的角度来 ...

  8. [PHP] 项目实践中使用的IOC容器思想

    1.容器的意思就是一个全局变量,里面存了很多对象,如果要用到某个对象就从里面取,前提就是要先把对象放进去2.控制反转就是把自己的控制权交给别人3.这两个结合就是,把自己的控制权交给别人并且创建的对象放 ...

  9. vue项目开发中遇到的问题总结--内部分享

     1.路由变化页面数据不刷新问题 这种情况一般出现在vue-router的history模式下,初次进入会执行钩子函数,再次进入时则不会. 解决方案: 监听路由变化 watch : { "$ ...

随机推荐

  1. BZOJ4034[HAOI2015]树上操作——树链剖分+线段树

    题目描述 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个 操作,分为三种: 操作 1 :把某个节点 x 的点权增加 a . 操作 2 :把某个节点 x 为根的子树中所有点的点权都 ...

  2. Leonardo's Notebook UVALive - 3641(置换)

    题意: 给出26个大写字母的置换B,问是否存在一个置换A,使得A2 = B 解析: 两个长度为n的相同循环相乘,1.当n为奇数时结果也是一个长度为n的循环:2. 当n为偶数时分裂为两个长度为n/2 ( ...

  3. 删除linux下的指定文件

    要求:删除linux下2天前的指定文件 find 文件问题:在 tmp 目录下有大量包含 picture_* 的临时文件,每天晚上 2:00 对一天前的文件进行清理.之前在 crontab 下跑如下脚 ...

  4. json序列化 & 反序列化

    json序列化: json的dumps方法可以将json格式数据序列为python的相关数据类型,比如str,常用于打印,另外,在序列化时,中文汉字被转换为unicode编码,在dumps函数中添加参 ...

  5. 【洛谷P1854】花店橱窗 线性dp+路径输出

    题目大意:给定 N 个数字,编号分别从 1 - N,M 个位置,N 个数字按照相对大小顺序放在 M 个位置里,每个数放在每个位置上有一个对答案的贡献值,求一种摆放方式使得贡献值最大. 题解:一道典型的 ...

  6. C#控件及常用设计整理

    1.窗体  1.常用属性  (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体.  (2) WindowState属性:  用来获取或设置窗体的窗口状态. 取值有三 ...

  7. context configure and clock schedule

    每个窗口都有自己的context,这里演示怎么配置context以及如何实现定时器...... #-*- coding:gbk -*- import pyglet platform=pyglet.wi ...

  8. 关于Jenkins部署代码权限三种方案

    关于Jenkins部署代码权限三种方案 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.修改Jenkins进程用户为root [root@jenkins ~]# cat /etc ...

  9. 面向对象【day07】:新式类和经典类(八)

    本节内容 1.概述 2.类的多继承 3.经典类VS新式类 4.总结 一.概述 在python还支持多继承,但是一般我们很少用,有些语言干脆就不支持多继承,有多继承,就会带来两个概念,经典类和新式类,下 ...

  10. jquery blockui 遮罩【转】

    参考 : http://bookshadow.com/weblog/2014/09/26/jquery-blockui-js-introduction/ blockUI.html blockUI.ht ...