问题一: 首次加载动画

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

解决: 两步走,

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>admin</title>
    <style media="screen" type="text/css">
      @keyframes bouncing-loader {
        from {
          opacity: 1;
          transform: translateY(0);
        }
        to {
          opacity: 0.1;
          transform: translateY(-1rem);
        }
      }
      #bouncing-loader {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
      }
      #bouncing-loader > div {
        width: 1rem;
        height: 1rem;
        margin: 3rem 0.2rem;
        background: #1890ff;
        border-radius: 50%;
        animation: bouncing-loader 0.6s infinite alternate;
      }
      #bouncing-loader > div:nth-child(2) {
        animation-delay: 0.2s;
      }
      #bouncing-loader > div:nth-child(3) {
        animation-delay: 0.4s;
      }
    </style>
  </head>
  <body>
    <div id="bouncing-loader">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div id="app"></div>
  </body>
</html>

第二部: 在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的组件

<transition name="fade-transform" mode="out-in">
  <router-view></router-view>
</transition>

.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里写个变量不就行了....

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