学习vue 20天,我写了点东西
往昔
最初团队里使用Angularjs进行开发,刚开始还好,到了项目后期越发感觉Angularjs太重了,以至于后来重构项目时,毅然放弃Angularjs,投入了Vue的怀抱。除了组建团队时,是我搭建了基于Angularjs的前端开发框架,之后都是由前端小组开发。前段时间,由于公司层面的原因,整个团队解散,不得已我又要写前端程序了。
虽然前期Angularjs的开发框架是我搭建的,但对前端来说我也是半路出家了。那个时候也不知道模块开发,更分不清commonJS、AMD、CMD,知道有个requirejs,就研究requirejs,研究了几天突然冒出一个叫grunt的构建工具,于是又研究grunt,同样研究了几天又窜出来个叫gulp的东西,丢了grunt又研究起gulp来,这真有点像小时候听的猴子摘桃的故事,看见好的就丢掉了之前的,最后什么都没得到。gulp搞的差不多了,不知又从哪里看到了一个叫webpack的东西,我的天哪,当时的感觉就是前端的东西太多东西了,那个时候是2015年下。
当下
再一次写前端程序已经到了2017年了,除了维护之前Angularjs的代码,还有新的项目,我选择了Vue 2.0。
学习一门新的技术是需要花费不少代价的,时间不说,动力也是不可或缺的。时间我有,动力也足,那就是半个月做完一个小的管理后台,API已经在上个周加班加点搞定了。半个月要学一门新的技术,还要把功能做完,自我感觉应该是没问题的,毕竟Vue真的是一个非常简单的框架。
我简单列了一个简单的学习计划,不用太详细,因为计划总是赶不上变化,事实也确实如此,最重要的还是动手、实践、执行。
- 第1天看完Vue的官方文档,大致了解一下Vue都有哪些功能,做到心中有数;
- 第2天看完vue-router和vuex,了解路由和状态管理,借助Shopping Cart的例子快速理解,state、getters、actions、mutations、commit、dispatch、mapGetters、mapActions;
- 第3天花了一点时间看axios,因为官方在Vue2.0中推荐axios;然后开始搭建项目结构,选择基于webpack的构建模板(不要问我怎么知道的,那么多优秀的开源demo);
- 第4天做了登录的功能,将vue付诸实践。刚开始写代码比较生疏,只好一边查文档一边写;
- 第5天做登录后的整体布局,结合metronic;写最简单功能的列表时,没找到合适的table插件,决定自己写一个;
- 第6天开始写自己的table插件,起了名字cxlt-vue2-table,放在了github上,前后花了4天,现在还不完善。写table插件的过程比较深入的了解了vue,谷歌了无数次,也无数次了文档;
- ...
- 还写了一个自动完成的插件cxlt-vue2-autocomplete和弹出提示cxlt-vue2-toastr的插件
最后按时完成了这个小项目,一只脚也算踏进了vue的大门,争取早日将另一只脚也踏进来。
未来
当下即未来,未来在当下
东西
上文提到的插件我都放在了github上,table和autocomplete还不是太完善,文档也没有写,周日的时候我把toastr的doc和example写了一下,感兴趣的可以前往看一下
项目地址:https://github.com/chengxulvtu/cxlt-vue2-toastr
Demo地址:https://chengxulvtu.github.io/toastr/index.html
Demo截图
学习vue 20天,我写了点东西的更多相关文章
- Struts2 学习笔记20 类型转换part2 写自己的转换器
之前说的是调用Struts2的默认转换器,现在我们来说以下写自己的转换器,这个一般不常用,在访问不是自己写的类中可能用到.我们一点点来,因为写自己的转换器需要注意的东西还是很多的. 我们还是用之前的项 ...
- 从零开始学习Vue.js,学习笔记
一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...
- Vue2 第四天学习(Vue的生命周期)
阅读目录 1.理解VUE---混合 2.Vue实例化选项 3.Vue实例化的生命周期 回到顶部 1.理解VUE---混合 在了解Vue生命周期之前,我们先来学习Vue中的混合吧: 为什么需要使用混合? ...
- TCP/IP详解学习笔记 这位仁兄写得太好了.(转载)
TCP/IP详解学习笔记 这位仁兄写得太好了 TCP/IP详解学习笔记 这位仁兄写得太好了. http://blog.csdn.net/goodboy1881/category/20444 ...
- vuejs学习——vue+vuex+vue-router项目搭建(三)
前言 vuejs学习——vue+vuex+vue-router项目搭建(一) vuejs学习——vue+vuex+vue-router项目搭建(二) 为什么用vuex:组件之间的作用域独立,而组件之间 ...
- Vue折腾记 - (3)写一个不大靠谱的typeahead组件
Vue折腾记 - (3)写一个不大靠谱的typeahead组件 2017年07月20日 15:17:05 阅读数:691 前言 typeahead在网站中的应用很多..今天跟着我来写一个不大靠谱的ty ...
- 学习 Vue ,从入门到放弃
最近项目刚完成,手上工作稍微轻松些,准备储备下技术,为未来挑战做好准备. 之前项目用的较多的是angulajs,不过版本较老,还停留在1.5x系,虽然结合了webpack,es2015等前沿技术,但理 ...
- Vue 2.0 入门系列(14)学习 Vue.js 需要掌握的 es6 (1)
针对之前学习 Vue 用到的 es6 特性,以及接下来进一步学习 Vue 要用到的 es6 特性,做下简单总结. var.let 与 const var 与 let es6 之前,JavaScript ...
- 学习C#20天有感
自学C#有20多天了,期间出差去深圳一周,每天平均学习4小时左右,看书+视频,之前有点C语言基础(仅限于基础哈哈),计划30内把C#的基本语法和SQL的基本语法熟悉,把面向对象相对深入的理解一些,然后 ...
随机推荐
- java标签(label)求16进制字符串的整数和 把一个整数转为4个16进制字符表示
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #4f76cb } p.p2 { margin: 0.0px 0. ...
- Java设计模式之《组合模式》及应用场景
摘要: 原创作品,可以转载,但是请标注出处地址http://www.cnblogs.com/V1haoge/p/6489827.html 组合模式,就是在一个对象中包含其他对象,这些被包含的对象可能是 ...
- Jemter+Badboy实战经验一(Badboy录制及基础功能)
1. 使用工具: Apache Jemeter:http://jmeter.apache.org/download_jmeter.cgi (免费官网下载地址) BadBoy: http://www ...
- 网络信息安全攻防学习平台 上传,解密通关writeup
上传关 [1]查看源代码,发现JS代码.提交时onclick进行过验证.ctrl+shift+i 打开开发者工具,将conclick修改为 return True,即可以上传上传php文件,拿到KEY ...
- 百度地图JavascriptApi Marker平滑移动及车头指向行径方向
相信只要是使用百度地图做实时定位服务的朋友都会遇到这个问题,在对坐标位置进行覆盖物展示的时候,会出现由于获取坐标数据时间或者两个坐标点相距过远,导致在视觉上看Marker移动就像"僵尸跳&q ...
- WeMall微信商城源码活动报名插件代码详情
WeMall微信商城源码插件活动报名代码是用于商业推广的比较有效的方式,分享了部分比较重要的代码,供技术员学习参考,商家可自由设置报名项目,活动时间,报名内容 代码详情地址:http://addon. ...
- java中的递归
所谓递归,是指程序调用自身,当然,递归不会无休止地调用下去,它必然有一个出口,当满足条件时程序也就结束了,不然的话,那就是死循环了. 看下面这个类,有几个递归方法,看了之后肯定会对你学习递归很有帮助的 ...
- docker X509 证书错误的终极解决办法
最近在做Docker相关的东西,发现只要一pull镜像,就出现如下的ERROR x509: certificate signed by unknown authority. 调查后发现,是公司IT把h ...
- QQ好友在线/离线,怎么测试?
即时通讯是目前internet上最为流行的通讯方式,各种各样的即时通讯软件也层出不穷,那么今天主要针对QQ好友在线状态/QQ群友在线状态功能出发,一起思考其中的实现原理以及我们如何去测试此功能? 当大 ...
- 使用Nginx+CppCMS构建高效Web应用服务器(之二)
使用Nginx+CppCMS构建高效Web应用服务器(之二) 上一篇 使用Nginx+CppCMS构建高效Web应用服务器(之一) 大致介绍了网站的整体架构,实际上通过调用REST获取数据并没有实现. ...