关于vue的实战项目的总结

最近公司要求做一个用vue来完成cms网站的开发，作为一个前端小菜鸟，并且才接触vue不久，决定开始写下我的第一个技术博客来记录一下在项目当中遇见的坑和怎么解决的办法。
vue的话一般是在单页应用当中运用的比较多，cms网站也一般会用静态页面的方式来做，这次用vue做cms最大的挑战就是当刷新的时候数据无法保存。之前用的是vue组件props以及$emit来传值，但是无法保存，于是做成了动态路由，url跟cid参数，每一次刷新页面，都会进行一次数据请求，也能记录下当前位置的点击状态。代码如下：

这样的问题还有一点，就是当路由不变，后面的cid变化，不能发起请求，这个时候就需要监测路由的变化。代码如下：

在这个项目当中，还有一点要注意。导航li是动态请求后台数据，用v-for生成，点击li进行路由跳转，这个时候需要给点击过的li的动态添加class。用dom驱动的想法就是获取当前url中的cid与导航当中的li进行对比，找到对应的导航，添加class。但是vue用的数据驱动，这里就可以这么做：

这里就很好的用数据驱动的思想来实现了给点击过的li动态添加class。

vue在ie中的兼容问题。用vue-cli搭建的文件在ie中不兼容，其实是因为ie不兼容es6的语法的问题。以下是各浏览器对es6的支持情况。

为了解决这个问题，可以引入babel-polyfill来兼容ie。

npm install babel-polyfill

在main.js中import如下模块：

import('babel-polyfill')

然后在webpack.base.config.js文件当中修改模块入口，即entry。

这是一般情况。在app中添加依赖图即可。但在实际开发当中用了多页面应用程序的entry应用场景，所以添加babel-polyfill的方式如下：

module.exports = {
  entry() {
    // 初始化入口配置
    const entry = {}
    // 所有模块的列表
    const moduleToBuild = require('./module-conf').getModuleToBuild() || []
    // 根据传入的待打包目录名称，构建多入口配置
    for (let module of moduleToBuild) {
      entry[module] = [`babel-polyfill`, `./src/modules/${module}/index.js`]
    }
    return entry
  },
  //other code
  }

但是打开ie之后发现还在报错，检查一下是发现element-ui当中用到es5语法，ie不支持，所以还需要添加babel-loader。

这样就可以在ie当中打开了。使用babel-polyfill会使得打包之后的文件变大