这个热到扑街的八月,我在学Vue

Posted qmzy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了这个热到扑街的八月,我在学Vue相关的知识,希望对你有一定的参考价值。

最近一个半月的学习就是一段不断上车、不断翻车、然后不断爬起来的过程。居住环境也比较恶劣,狭小昏暗通风不畅、白天室内温度足足有42°,能够对抗高温的只有一个小风扇,还时不时的停水断电,所以导致工作休息时间也不太稳定,白天太热了就小眯一会,热醒就爬起来写代码,热的失眠写通宵的情况也有发生。期间的迷惑、纠结与苦楚实在是难以言表。

源文件下载地址:https://github.com/gusuziyi/mall

 第一周比较顺利,在网易云课堂上2倍速看完了bootstrap,然后就找了三个网站开始山寨,中间尽管小有波折,但在bootstrap官网上基本都找到了解决方案,还顺便学会了怎样使用阿里的iconfont图标,这是一套字体矢量图标,在任何设备上都不会失真,与bootstrap的响应式思想十分契合;

 

 第二周在淘宝上五角钱买了一套vue视频,系统的学了一下,由于有7月份开发安卓App的经验,一周基本入门,然后结合bootstrap写了mall的v1.0版,实现了一个类似于购物车的小页面,这期间发现了mockjs,他可以拦截浏览器的ajax请求,然后返回随机生成的随机数,是一款很不错的测试工具。代码方面整体来讲并没遇上过多的障碍,因为就用一个vue对象,所有函数和变量在一起,修复bug很容易。


技术分享图片

 

 图一:用mockjs生成的随机数据

技术分享图片

 

图二:第2行编写调用mock函数

技术分享图片

图三:使用mock生成数据,我试了很久,除数字外其他数据都必须返回函数调用,否则会有无法实现Random方法,另外dataImage方法需要canvas支持,此处不影响,但在后来写V3.0版时node服务器会有报错

 

第三周开始学nodejs,淘宝上花五毛买了一套视频,跟着视频手撸了一套http服务器和路由器,然后在8888端口上实现了一个比较简陋的拼图游戏,如图四

 技术分享图片

       图四:用jquery实现的简易拼图游戏

      但这期间node让我费解的地方有两个,一个是callback是什么,如图五第12行,一个是为何在函数体内的this赋值,图六第5行,
     
技术分享图片

        图五

技术分享图片

        图六

在查过大量资料之后,终于理解了callback是处理异步低速函数的一种机制,由于读写硬盘与CPU运行相比极慢,所以程序运行后丢给readFile一个cb就不管了,什么时候硬盘读完了用cb把数据发送过来触发响应函数就行了,而this赋值则是js中的闭包概念,这样做的好处是能够避免变量遭到污染,那时我还不知道es6的存在,还不知道变量作用域提升,随处用的都是var,所以费了好大力气才理解这个闭包的概念,其中走的弯路一言难尽。之后开始学Mongo数据库,由于之前用过wamp,所以一天基本入门,然后在路由里面写出了增删改查方法,

 技术分享图片

如图七,mongo的add方法,第7、11行均为异步调用,此时已经理解了异步的原理

 

第四周开始学express+ejs框架,这个东西我觉得类似于多年前的cms系统,内部实现一套逻辑供前台调用,只是cms只需要理解前台调用,而express需要理解原理。没想到这个东西居然也属于前端范畴,看来这个前端行业挺不容易的。学完node来学express,感觉就像学完了js来学jquery,尽管都是集成好的东西,学习难度骤减,但是由于许多东西没有积累,也会踩不少坑,像下面这些:

 技术分享图片

图八:由于当时不知道子路由和路由重定向,结果纯手工实现的这些功能

技术分享图片

图九:对策略集里的通用函数复杂度估计不够,第4行开始只写了一个data,结果写到一大半的时候发现bug无法解决只能改结构,增加data1和data2,挺无奈的。。。

 

第五周,因为学会express,就开始改版之前mall,升级成V2.0,主要改动有两个,一是将mall页面搭设到本地express服务器上,如图十;二是将页面拆成层层嵌套的vue组件,这期间重点关注了关于组件间的数据通信:父子之间使用props,子父之间使用emit广播,兄弟之间使用数据总线,更复杂的数据交换还可以使用vuex。同时,为了各组件间可以共享数据和方法,将根节点绑定的vm定义为全局原型变量Vue.prototype。经过这个练习,也基本理解了MVC设计模式。

技术分享图片

图十:在express中渲染的mall页面

技术分享图片

图十一:在ejs中区分商店shop、商品item和总价totalsum三个vue组件

技术分享图片

图十二:组件中的控制代码

 

第六周先是学习了less与es6,然后特郁闷的发现项目中import和export始终无法正常使用,我一直怀疑是sublime上的babel没有调试好,但是始终查找不出问题,学习一度陷入停滞,后来无意中发现vue-cli,接触到工程脚手架这个概念,上手之后发现这个工具真是前端神器,所有的node模块都可以用npm集成过来,babel是默认内置的,而且组件模块化,全部都是单独的文件,加上严格的书写规范,非常适合多人合作项目,所以使用vue-cli把mall升级成了V3.0

 

首先介绍下文件夹目录树结构,设计的非常有条理性:build是后端服务器文件;config是服务器配置;dist是工程成品文件,使用npm run build 生成,全部兼容es5格式;node_modules是依赖包,由package.json索引,工程文件不必上传,根目录下使用npm install能够自动安装;src为工作目录,其中的assets为静态资源,componets为组件集合,router保存路由表,App.vue是app的入口组件,main.js负责绑定App组件、入口文件和路由表;static是内置的静态路由

技术分享图片

图十三:文件夹目录树结构

 

第一步我在后端另外搭建了jsonServer服务器,用于返回测试的mock数据,由于vue-cli默认占用8080端口,而我将jsonServer设置于3003端口,这导致前端的ajax访问涉及到跨域问题,我的方法是使用express的cors中间件,把整个3003端口全部设置成可以跨域访问,这就是使用node服务器的好处,否则在前端我们只有通过构造jsonp请求才能解决。

技术分享图片

图十四:将jsonServer设置于3003端口

技术分享图片

图十五:使用expresscors中间件解决跨域问题

技术分享图片

图十六:jsonServer的一些设置,注意第12行,jsonserver可以将ajax返回数据中的对象键值解析成express子路由,这样一份mock就可以支持多个页面数据查询,非常方便

 

后来我偶然发现在config/index.Js中可以直接设置代理转发proxyTable,这样就可以不用设置cors中间件了,如图十七第14行

技术分享图片

图十七:设置访问api接口转发至 http://localhost:3003/

 

由于想使用bootstrap,所以查了很久如何在main中引入jquery,相关资料真的寥寥无几,直觉告诉我可能思路不对,资料这么少,证明bootstrap也许并不适合vue,然后我就查vue用什么ui框架,结果主流的有两个element和iview,又要面临二选一,其实自学前端真的好纠结,经常要纠结于学哪个技术,框架要在vue、angular和react中三选一,预处理器要在less和sass中二选一,数据可视化要在highchart、echart和d3中三选一,UI更是要在万紫千红中N选一。然后element和iview纠结了许久,发现iview里面有两个i,我名字里也有两个i,觉得很投缘,就学了iview。和上面那些技术一样,也是出于一个莫名其妙的原因,就开始学了

技术分享图片

图十八:在vue-cli中引入jquery的方法

然后就是编写组件,由于预处理使用了less,可维护性大大提升了,如图十九,


技术分享图片

图十九:less

但是js还是踩到了许多坑,在不断纠结,不断试错,不断查找资料当中,总结出了以下七条难忘的教训:

一、 data必须定义成函数,同时返回对象

二、 computed与methods联系不大,它更像是data,一种没有输入但必须有输出的data

三、 想让props支持驼峰,必须定义成对象,例如props:{ isAllCheck:{} , shop:{}   },数组不可以

四、 Js中的大写到了template中会自动转成横线,template不支持大写,例如: ShopList会变成<shop-list>

五、 Watch中定义方法为 变量名:函数体,例如: isAllCheck(){  this.isCheck=this.isAllCheck }

六、可以在created 或mounted中监听广播,他们不是在创建时监听,而是会一直监听

七、可以在枚举时把:key="index"交给子组件,但子组件中不可调用index,会无法识别,正确的做法是子组件发出广播事件,在父组件中监听事件然后使用index

技术分享图片

图二十:最后的成品

虽然和之前的V1.0、V2.0看起来几乎一样,但是后台发生了翻天覆地的变化,由于还没解决node支持canvas的问题,无法绘制base64格式的随机颜色图片,v3.0相反还要更丑一点。

 

八月的最后一天,将将完成这个月的自学计划,走了不少弯路,但同时也学了不少知识,与七月底的迷茫不同,现在对九月份有十分清晰的学习目标,就是vue-cli、iview和webpack,8月份,自学的第二个月结束,希望自己还能坚持的住,加油

 

源文件下载地址:https://github.com/gusuziyi/mall









































以上是关于这个热到扑街的八月,我在学Vue的主要内容,如果未能解决你的问题,请参考以下文章

字节跳动换老板了,我面试也扑街了...

字节跳动换老板了,我21年第二次Java面试经历也扑街了...

敖丙在蘑菇街的技术分享

八月十五——距noip2017倒计时37天有感

八月十五——距noip2017倒计时37天有感

vue 里怎么使用 echarts 实现地图自动轮播功能自定义 tooltip 悬浮位置提示自定义 label 标签位置样式?