vue2.0+webpack+elementUI+supermap+echarts爬坑之旅
前言
前端模块化及工程化是目前一大趋势,传统的开发模式固然有其优势,但繁杂的配置项以及高耦合的前后台关系使得当需求变更或者负责人职务变动所遗留下的代码难以维护和阅读,vue生态系统的出现弱化了这一类问题,基于webpack打包工具可以灵活的配置项目所需插件并使组件开发模块化,使得代码更易维护和阅读,vue-router则简化了单页面应用(SPA)的实现,让路径跳转全权交由前台负责(再也不想用iframe了),所以新项目毅然决然的摒弃了之前的纯HTML+CSS+JS无脑式编程,采用模块化,工程化的开发模式,但新技术的应用必然会带来一系列的“水土不服”,故接下来的系列文章我决定从零开始,一步一步重现如何做这个项目demo,以及截至目前我所遇到的各类问题汇总(最头疼的是elementUI配合echarts的自适应问题),鉴于我水平实在有限,所以这可能是“我看过这么多文章里面”最直白而且简单的vue教程了,当然,姑且称之为教程吧,另外由于对VUEX的研究还没透彻,所以该项目没有使用vuex做状态管理,以后有机会再补上吧,最后的最后,里面肯定还会有一些我没遇到的bug,所以发现了请务必告诉我,一起完善这个项目,共同进步
项目成果图:
( 由于部分数据涉及隐私故作打码处理,不要吐槽UI :) )
目录
- 使用vue脚手架搭建项目
- webpack的配置
- 开发第一个vue模块
- jq的引入及jq插件的引入
- Supermap的引入及“helloword”
- Echarts的引入及自适应
- 未完待续
技术栈:
必备:vue + vue-router + elementUI(也可选择iview)
css : animate.css
其他 : Supermap + echarts
第一期在端午节前夕发哈~不拖更不拖更。。。。
QQ:58595325(欢迎骚扰)