历经小半年的vue项目总结项目介绍这个项目是刚来公司就接手的，是一次重新开发，从项目的架构到最后的上线测试，全部过程我都

项目介绍

这个项目是刚来公司就接手的，是一次重新开发，从项目的架构到最后的上线测试，全部过程我都是主导参与，这篇文章是整个项目的总结，罗列项目中的重点难点，以及解决方案，对于项目的完善反思

公司内部项目签署了保密协议就不附图了

1.首先是项目的整体架构，我认为一个项目最主要的就是整体项目的搭建，

主要是src下面的，

api项目只要的一些数据操作，和请求的一些参数份参数封装比如 api下的config.Js会有一些数据请求成功之后的code码，一般成功之后服务器返回200参数
base下面是一些公共的组件
common下面是一些基础的js，css，image，在css里面会除了一些公公样式，还会定义一些基准色，整个项目设计的基准色，以后遇到节日换色的话是很方便的，这里没有iconfont我们引入的是阿里的cdn，这样子就不用下载fonts文件，也方便开发
components是业务组件
router整个项目的路由，这个是个重点，首先是路由懒加载，这个可以在首屏优化上有很多，再是路由分块加载由于项目页面很多，这样的话整体项目很清晰，好维护，也方便多人合作开发，再是路由钩子，项目的一些权限验证，附上路由钩子代码

router.beforeEach((to, from, next) => {
    if (to.path != 'index' && getCookie('access_token') == null && to.meta.requiresAuth) {
        next('/denglu')
    } else {
        next();
    }
})

store，vuex他相当于前端数据库，储存一些公共的状态，或数据，这里我要说下，最好精简，不要一遇到公共数据或状态就存储，这个日后不好维护，
views是项目主体框架的代码

2.项目的骨架开发

先把项目的骨架搭建起来，剩下的就是填充内容的事情了

3.项目的重点难点

1.单页面应用的最大问题就是首屏优化的问题，在这里说说这个项目用到的技术，首先路由懒加载，不要把所有的js都打包一起

2.项目的插件cnd引入，多线程加载速度会快些

3.骨架屏在首屏加载的时候先显示骨架屏

4.项目中的会用到axios拦截器，因为项目做的是单点登录，就需要响应拦截器附上代码


// 添加响应拦截器
axios.interceptors.response.use(function(response) {
    // token 已过期，重定向到登录页面
    if (response.data.error == 401) {
        delCookie('access_token');
        router.replace({
            path: '/denglu',
            query: { redirect: router.currentRoute.fullPath }
        })
    }
    return response
})

5.页面优化的话还可以用到图片懒加载 vue-lazyload这个插件，这样的话不用请求所有的图片请求，需要那个请求那个对页面优化也起到了很重的作用

6.项目中会将vue页面转化为pdf 附上代码

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function () {
      var title = this.htmlTitle
      html2Canvas(document.querySelector('#pdfDom'), {
        allowTaint: true
      }).then(function (canvas) {
        let contentWidth = canvas.width
        let contentHeight = canvas.height
        let pageHeight = contentWidth / 592.28 * 841.89
        let leftHeight = contentHeight
        let position = 0
        let imgWidth = 595.28
        let imgHeight = 592.28 / contentWidth * contentHeight
        let pageData = canvas.toDataURL('image/jpeg', 1.0)
        let PDF = new JsPDF('', 'pt', 'a4')
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
          while (leftHeight > 0) {
            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            if (leftHeight > 0) {
              PDF.addPage()
            }
          }
        }
        PDF.save(title + '.pdf')
      }
      )
    }
  }
}

4.项目中的一些细节注意

在vue中不能直接操作data里面的数组需要用到

$set方法
this.$set(this.arr, index, 需要变化的值);

历经小半年的vue项目总结