2018-10-16近期vue开发总结

问题一: 首次加载动画

由于单页面,不可避免第一次加载需要耗时, 所以需要搞个加载动画

解决:
两步走,

• 第一步:
  在index.html中写下动画, id为bouncing-loader的那个div

• 第二部:
  在App.vue中添加加载完页面将加载动画的dom移除的代码, 需要加在created的生命周期中

created() {
      document.body.removeChild(document.getElementById('bouncing-loader'))
},

问题二: 页面加载进度条

解决:
使用nprogress
在路由里进行配置

router.beforeEach((to, from, next) => {
  NProgress.start() // start progress bar
  if (to.path === '/login') {
    if (!store.state.user) {
      next()
      NProgress.done()
    } else {
      next({path: '/'})
      NProgress.done()
    }
  } else {
    if (store.state.user) {
      next()
      NProgress.done()
    } else {
      next({path: '/login'})
      NProgress.done()
    }
  }
})

router.afterEach( () => {
  NProgress.done()
})

参考资料:
http://ricostacruz.com/nprogress/

问题三: 页面切换动画

解决:
使用vue的组件

.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .3s;
}
.fade-transform-enter {
  opacity: 0;
  transform: translateX(-10px);
}
.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(10px);
}

参考资料:
https://cn.vuejs.org/v2/guide/transitions.html

问题四: 表格上方的过滤表单, 不想点按钮搜索

如图

image.png

解决:
使用watch即可
如果监控的时对象,需要使用 deep:true

watch: {
    query: {
      handler: function () {
        // 请求数据的方法
      },
      deep: true
    }
  }

当然如果这样会导致抖动请求影响性能
可以引入lodash的 debounce

参考资料:
https://cn.vuejs.org/v2/api/#vm-watch
https://www.lodashjs.com/docs/4.17.5.html#debounce

问题五: 维护登录态

解决:
使用localstorage, 需要再加个自己的定时
登录的时候, 存入用户信息和失效时间

localStorage.setItem('admin_user', JSON.stringify(user))
localStorage.setItem('admin_user_invalid', (new Date()).setTime(new Date().getTime()+24*60*60*1000))

在页面加载时,比对时间,判断是否过期, 在main.js

let nowTime = new Date().getTime()
let validTime = JSON.parse(Vue.localStorage.get('admin_user_invalid'))
if (validTime === undefined || nowTime > validTime) {
  // 过期
} else {
  // 没过期
}

问题六: 页面整体高度撑起来

原来用的百分号
解决:
使用vh和calc()

参考资料:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/length
https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc

问题七: axios使用get方式下载文件

由于需要token,所以需要用ajax
解决:

axios.get(`/download`).then((response) => {
  let blob = new Blob([response], { type: '文件类型例如application/pdf' } ),
  url = window.URL.createObjectURL(blob)
  window.open(url); 
})

问题八: build后给后台留个更改接口的地方

一直百度,发现什么写到配置文件, 然后请求来初始化, 感觉很麻烦
解决:
直接在index.html里写个变量不就行了....