Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结

本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws

一.写在前面

项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用。其实说是多页面应用,实际上在webpack中属于四个app,  如果真是做纯单页面,那应该有二三十个页面吧。所以我这里的多页面应用,是分为四个SPA。比如微信最下面,有四个导航,微信,通讯录,发现,我。 那么这四个导航,就是我的四个SPA,配置多个入口即可。

在这里就不说太多代码了,项目结构将会放到github上,地址在后面给出,以供参考。

开发工具使用的VS2017,本来使用WS,但是用习惯VS的我还是受不了,毕竟17还是太强大了嘛。既然是vue项目,那数据请求肯定就是vue-res, 路由就是vue-loader,编译es6大家都是babel。 下面是项目结构预览:

Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结他们分别是图片资源,引用库资源,发布打包后的js和css,src源码和打包后的html

二.几点重要的收获

1.组件化开发爽啊, 调用者只需要关注输入和输出,代码明朗,容易维护

2.vue-res promise异步风格太优美,太喜欢了

3.记得以前做一个手机端项目,完全没有自动化,各个页面间跳转慢的一比,一点也不流畅,项目结构不容易管理,重复代码特别多。

 近百个页面js版本得不到控制,管理js,css引用困难。微信静态资源缓存如此严重,没有版本控制,每个页面js版本的修改要人命。

4.解决缓存问题,应禁止html缓存,由于使用extract-text-webpack-plugin,可以保证你html入口中只有简单的几行代码,等着自动化帮你引入所需js,所以即使禁止html缓存,也不会影响响应速度,毕竟我们的html文件      也就1-2k左右.html禁止缓存的原因是防止,js更新后,js hash版本已改变,但浏览器缓存的html中,依然是请求旧版本js文件,这样一来js版本控制变得没有意义。

5. js调用手机拍照, 调用安卓手机拍照不容易呀,所以如果只想在微信上使用网页的话,建议使用 微信js SDK。

6. 苹果手机和个别安卓手机,使用原生input调用拍照后,图片到页面中会出现旋转问题,所以在微信上 使用js sdk, 在其他浏览器上,就用EXIF.js  手动将其旋转90度 或者180度进行矫正。

7.推荐一款mobile用的不错的弹窗组件 vue-ios-alert.  ios风格的弹窗。地址以及github:   http://isay.me/vue-ios-alertview/example/Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结

8.手机上的 日期 时分秒选择器,推荐一个有坑的货 https://github.com/k186  有坑哦,使用的话,请看closed的第一个issue。另外日期选择还是比较推荐原生。加上时分秒的话原生的可能就不好用。Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结

9.页面touch切换tag 使用的一个vue-tab  github找一找

10. 上拉加载更多 用的vue-loadmore,侧方滑动菜单 使用了jquery的slideout

11. 如果路由比较多的话,建议路由单独分一个js配置,并且一定要按需加载,否则打包文件太大。如果是用户点击率极高的路由,可以直接require进去。

12.一些js库,就不要通过require了,直接在html引入进去算了,毕竟这些库基本不会更改,也没必要控制版本

13.前端AOP,  vue-res的拦截器点个赞,我可以在拦截器中,为我每一个请求 都加上authentication header等信息,像用jq的时候,我不得不手动把ajax包装一层

14.像有些数据的加载,文字方面,最好预先给出加载中这种提示,不能给空白。列表的加载 要多考虑加载中,加载完成和暂无数据的处理。见过很多app和网页都是进入到列表页,首先一个暂无数据的背景图给出来         了,结果稍等一下,数据又加载出来了....

15.虽然已经组件化了,但我还建议有一个每个页面公用需要require的js,我一般都叫application.js  在这里 可以放一些你的常量,枚举,公共方法,helpers,utils,ajax 等配置,并且在这里可以import footer header vue-res vue-alert 等一些每个组件或者页面都需要以来的组件

三.一些缺点

1.脑子抽风啊,分为四个SPA, 整套项目下来,感觉还是应该做一个SPA。毕竟SPA之间切换,一个SPA切换到另一个SPA 还是加载东西太多,不够流畅。虽然微信浏览器缓存“严重”

2.项目结构划分还是不够合理,但感觉也还能对付用。

3.组件化没有发挥到极致,自己vue组件间通信没搞好,md找子组件,我竟然还有通过遍历的方式。

4.有些组件用的jquery的,搭配的不是很流畅,导致个别操作强行使用dom操作。

5.我有四个环境,开发,测试,demo, 线上。 每次发布到一个环境  都需要改了配置后,重新打包,很痛苦啊,关于这一点有什么好的办法吗?

四.写在最后

这个项目产品将继续开发,不过下一阶段还有个项目,我将使用一个SPA完成,关于vue有什么好的各种mobile组件,希望dalao不吝推荐。

如果,您认为阅读这篇博客让您有些收获,不妨点击一下右下加【推荐】按钮。
如果,您希望更容易地发现我的新博客,不妨点击下方红色【关注】的。
因为,我的分享热情也离不开您的肯定支持。

感谢您的阅读,我将持续输出分享,我是蜗牛, 保持学习,谨记谦虚。不端不装,有趣有梦。

上一篇:【spoj SUBLEX】 Lexicographical Substring Search


下一篇:解决办法:由于oracle版本不同导致导入数据时失败