Vue + iView + vuex + vee-validate 完整项目总结

 

   

  部门最近的一个新项目启动，很幸运由我来主导整个前端部分的技术选型和总体架构，项目工做量很大，可是却没有足够的人手，只有三个连CSS都不太会的实习生跟着我一块儿作，压力山大。两个月以来，虽然碰见了不少问题，可是最终顺利的解决了，项目基本完成，果断写一篇总结，毕竟是第一个真正意义上全权本身负责的大项目 。

　　1、技术选型。

　　若是没有接触过新的知识，我可能会像以前的部门的全部项目同样，循序渐进的使用Jquery + bootstrap + sea.js/require.js 进行开发，可是我说了NO。

　　首先，此次项目初步估计有近百个功能点和几十个页面，若是仍用jquery的方法，光是臃肿的dom操做代码就把人写的筋疲力尽了，并且我本身本人也是在是厌倦了重复而乏味DOM操做。因此我选择了Vue, 至于为何不是react和anglar, 相对于他们Vue我以为对于新手来讲是很容易上手的，相对于react一些相关的技术栈，Vue对于实习生更容易掌握。使用Vue我只须要把项目共用的模块封装成共用组件，让他们去调用就能够了，这一点保证了他们不多去写CSS样式，也为项目快速的开发完成起到了必定的决定因素。

　　最终使用的技术以下：

　　基础JS框架： Vue， 基础样式和组件框架： iView ，国际化插件： vue-i18n，表单验证插件：vee-validate

　　项目打包工具：webpack + babel

　　代码规范性检查： eslint

　　2、项目过程当中碰见的问题。

　　这部分实际上是我写这篇博客的主要目的，好多问题，毕竟总结更多的是去记录过去碰见的问题和走过的弯路。

　　一、旧的JS代码的兼容。

　　因为项目中有一部分的代码是以前的项目组使用的seajs封装的模块，并且这部分代码内部的逻辑比较复杂，重写基本是不可能的，没时间何精力去研究，只有经过引入到咱们的webpak工程中，如何把这部分代码挪过来而且不多改动就成了一个大问题。很幸运，webpack直接支持AMD或CMD的代码，我用的vue-cli初始化的项目，因此更改了一些webpack.base.config里的一些配置，可是忍让须要修改一些配置让原来js里的require可以找到原来的模块并执行。

　　新建了一个oldModuleConfig.js,

const path = require('path')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

const oldModuleConfig = {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
   /* Switch EWeb */
  'oldModule1': resolve('src/oldModule1'),
  'oldModule2': resolve('src/oldModule2'),
  'oldModule3': resolve('src/oldModule3'),
  'oldModule4': resolve('src/oldModule4'),
}

module.exports = oldModuleConfig 

　　而后修改了webpack.base.config.js

resolve: {
    extensions: ['.js', '.vue', '.json', '.less'],
　　/**  alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
　   } **/
    // 将原来的这部分改为这样
    alias: oldModuleConfig
  }

　　

　这样原来的module1里面若是写了require就能够直接使用了

var module2 = require('module2') //这行代码若是没有配置直接引入就找不到module2这个模块，而配置alias以后就能够运行了

　　这是本人本身想到的略low的方法,若是有高人指出能够在webpack里引入旧的seajs/requirejs代码其余方法，欢迎指出。

　　二、原有代码没法经过eslint语法检查

　　原来的代码虽然引进来了，可是却没法经过eslint的检查，这个问题我是直接选择忽视原有文件的检查，若是你是用了vue-cli构建的项目，能够修改.eslintignore

build/*.js
config/*.js
src/oldCodeFolder //旧代码的文件夹

　　三、Vue-router 页面刷新

　　若是用过vue-router的应该知道，若是点击的连接就是如今的页面，那么当前页面组件是不会刷新的，实际过程当中可能但愿再次点击页面是刷新一下。解决办法是使用一个中转页面bus,全部的页面跳转到这个bus.vue，而后由这个页面再调回原来的页面，这样就达到了刷新的效果。

　　

<!-- 
  这是一个中转的页面，自己不具备任何内容,为何要设置这个中转页面呢？
  由于vue-router点击当前页面的连接时并不会刷新组件，为了保持再次点击刷新，
  经过设置这个bus中转页面便可实现
 -->
<template>
  <div>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {
    jumpToPage () {
      let path = this.$route.params.path
      if (path) {
        this.$router.replace(path)
      }
    }
  },
  mounted: function () {
    this.jumpToPage()
  }
}
</script>

　　而后router-view里传入下一个即将跳转的页面路径便可

  <router-link :to="{ name: 'bus', params: { path: nextPath }}":key="link.en"> {{ link.en }} </router-link>

　　

　　四、iView封装带分页的表格组件

　　iView提供了Table和Page两个组件，可是很蛋疼，没有提供带分页的表格组件，因此须要本身进行组合实现。这里提供示例代码，

　　

<template>
    <div class="clear">
      <Table :columns='columns' :data='showData' :ref="refLabel" :loading="loading" stripe :no-data-text="'<span class=\'no-data-text \' > <i class=\'icon-no-data\'></i> ' + $t('message.nodata')+ '</span>'"></Table>
      <Page :total='dataCount' :page-size='pageSize' :show-total='isShowTotal' :current.sync="current" class='paging' @on-change='changepage'></Page>
    </div>
</template>
<style scoped>
  .paging{
      float:right;
      margin-top:20px;
  }
</style>
<script>
export default {
  data () {
    return {
      ajaxHistoryData: [],
      // 初始化信息总条数
      dataCount: 0,
      // 每页显示多少条
      showData: [],
      current: 1
    }
  },
  props: {
    pageSize: {
      type: Number,
      default: 10
    },
    columns: {
      type: Array
    },
    isShowTotal: {
      type: Boolean,
      default: true
    },
    tableData: {
      type: Array
    },
    refLabel: {
      type: String
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 获取历史记录信息
    handleShowData () {
      if (this.tableData && this.tableData.length) {
        // 保存取到的全部数据
        this.dataCount = this.tableData.length
        // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
        if (this.tableData.length < this.pageSize) {
          this.showData = this.tableData
        } else {
          this.showData = this.tableData.slice(0, this.pageSize)
        }
      } else {
        this.showData = []
        this.dataCount = 0
      }
      this.current = 1
    },
    currentChange (value) {
    },
    changepage (index) {
      var _start = (index - 1) * this.pageSize
      var _end = index * this.pageSize
      this.showData = this.tableData.slice(_start, _end)
    }
  },
  created () {
    this.handleShowData()
  },
  watch: {
    tableData (oldVal, newVal) {
      this.handleShowData()
　　　 // 表格刷新了，当前页标识须要回到第一页的位置
      this.current = 1
    }
  }
}
</script>

　　这里没有写异步获取数据的方法，因此具体使用时须要解渴本身的业务逻辑进行修改。

 　　五、webpack打包体积过大，减小打包体积

　　说出来大家可能不信，咱们的代码最终放在的服务器智能放下60M左右的文件，我也是很无奈，因此减小webpack打包体积就成了一个必须的问题。解决方法以下：

　　　　a、首先最直观的，将生产环境的sourceMap设为false ,这里设置完以后，打包后的文件就没有了.map文件，这一步基本减小了一大半的代码体积。

　　　　b、使用webpack-bundle-analyzer 优化你的代码

　　　　 若是vue-cli构建的项目，只须要在package.json的scripts里加入：

"analyz": "set NODE_ENV=production && set npm_config_report=true && npm run build"

　　       而后运行npm run analyz， 打包成功后浏览器会自动打开相似下面的页面，找出其中共用写入Vendors, 而后使用webpack.optimize.CommonsChunkPlugin 进行优化

　　

　　c、若是大家有CDN的话，尽可能把基础代码如： vue , vue-router 放在CDN上面

　　d、tree shaking 去除无用的代码

　　六、其余

　　其实还有许多大大小小的问题，好比Vue的路由拦截，webpack多页面,DDL优化打包速度，覆盖iVIew组件，nginx代理，组件scoped样式覆盖不了iView默认样式等等许多，每个解决完了都有满满的成就感。

　　3、项目构建问题回顾

　　一、代码初期没有架构合理，致使后期存在一些维护上的问题。

　　好比，代码引入了SASS，开始没有设置一个主题的公共文件，致使后面设计变更总体主题跟着发生了一些改变，虽然iView支持更改主题，可是本身写的一些组件因为没有共用的主题文件，致使后期修改比较麻烦。

　　二、代码没有review

　　虽然代码总体风格使用了eslint去规范了，可是其实真正开发的时候发现三个兄弟的代码很不规范，毕竟工做经验不足，包括变量的大小写，css类命名，甚至在页面里使用了Jquery等问题，一开始没有review， 后期仔细阅读他们的代码的时候才发现这些问题，而后才进行修改。其实这些问题在项目开始我就应该说明的。

　　三、其余

　　后续补充。。。

　　4、项目收获

　　整个项目在代码架构上仍是得到了其余同事的承认，至少推进了部门前端向前走了一步，我算是部门第一个吃螃蟹的人，勇于把新技术果断使用到新的项目里，第一次将webpack + vue的技术栈总体运用了一遍，虽然不能说精通，可是应该也是熟练掌握了，总以为本身平日所学没有白费，实践应用了一遍满满的收获。

　　2018 继续前行。

 　　喜欢的话能够点个推荐或者关注哦！

 

 

　　注：本文出自博客园 https://home.cnblogs.com/u/mdengcc/ ，转载请注明出处。