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

部门最近的一个新项目启动,很幸运由我来主导整个前端部分的技术选型和整体架构,项目工作量很大,但是却没有足够的人手,只有三个连CSS都不太会的实习生跟着我一起做,压力山大。两个月以来,虽然遇见了很多问题,但是最终顺利的解决了,项目基本完成,果断写一篇总结,毕竟是第一个真正意义上全权自己负责的大项目 。
  一、技术选型。
  如果没有接触过新的知识,我可能会像之前的部门的所有项目一样,按部就班的使用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
  二、项目过程中遇见的问题。
  这部分其实是我写这篇博客的主要目的,好多问题,毕竟总结更多的是去记录过去遇见的问题和走过的弯路。
  1、旧的JS代码的兼容。
  由于项目中有一部分的代码是之前的项目组使用的seajs封装的模块,而且这部分代码内部的逻辑比较复杂,重写基本是不可能的,没时间何精力去研究,只有通过引入到我们的webpak工程中,如何把这部分代码挪过来并且很少改动就成了一个大问题。很幸运,webpack直接支持AMD或CMD的代码,我用的vue-cli初始化的项目,所以更改了一些webpack.base.config里的一些配置,但是忍让需要修改一些配置让原来js里的require能够找到原来的模块并执行。
  新建了一个oldModuleConfig.js,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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  
1  
2  
3  
4  
5  
6  
7  
8  
9  
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代码其他方法,欢迎指出。
  2、原有代码无法通过eslint语法检查
  原来的代码虽然引进来了,但是却无法通过eslint的检查,这个问题我是直接选择忽视原有文件的检查,如果你是用了vue-cli构建的项目,可以修改.eslintignore
1
2
3
build/*.js
config/*.js
src/oldCodeFolder //旧代码的文件夹
  3、Vue-router 页面刷新
  如果用过vue-router的应该知道,如果点击的链接就是现在的页面,那么当前页面组件是不会刷新的,实际过程中可能希望再次点击页面是刷新一下。解决办法是使用一个中转页面bus,所有的页面跳转到这个bus.vue,然后由这个页面再调回原来的页面,这样就达到了刷新的效果。
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


  


  

route.params.path
      if (path) {
        this.

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

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭