蚂蚁金服体验技术部招人啦,前端开发专家,Node.js开发专家,欢迎投递简历,长期有效。邮箱:chenglin.,。

关于结缘的前端使用哪种框架,笔者之前有过Angular.js的开发经验,在React.js和Vue.js之间徘徊了一阵子最终选择了Vue,在我看来Vue和Angular有许多的共同点,在看Vue的文档的时候有很熟悉的味道,但和React类似只关注View这一块。Vue没有像React那样什么都放到js中,简洁方便的api设计以及组件式开发是我选择它的主要原因。

实现前端大抵有两种思路,一个是由后端拼接页面后返回完整的网页,然后由浏览器渲染。另一种是由后端返回json之类的数据,然后由前端拼接数据进行展示,当然也可以两者混搭。实现前后端分离是很多web开发人员的梦想,有兴趣的可以看看Web系统开发构架再思考-前后端的完全分离。

结缘前端打算使用Vue.js做成SPA(Single Page Application)的形式,即一个入口页面,后续数据由后端Nodejs实现Restful风格的API调用,然后在前端呈现。使用Webpack作为前端工程解决方案解决资源管理,按需加载,实时更新等问题。本篇我们探索使用Vue.js实现结缘的登录界面。

为了方便大型应用的开发,尤大大开发了Vue-cli脚手架,提供了一系列的工具和库,方便我们快速的进行开发,具体功能包括单文件 Vue 组件,热加载,保存时检查代码,单元测试等,本质上和Express的express-generator是一样的。

关于webpack如果没了解过可以看基于webpack搭建前端工程解决方案探索,然后安装vue-cli:

由于vue-cli生成的文件中使用的是ES6的语法,而ES6是未来的趋势,所以ES6必须一学,目前浏览器和Nodejs对ES6的支持程度不断提高,不过要在所有的浏览器中使用es6代码目前还不可行,不过babel可以帮你提前体验新的语法而不需要等待浏览器支持。babel本质上是一个js的预编译器,可以把es6程序编译成es5,从而在支持ES5的环境中运行。

学习vue目前没有足够的教程可以帮我们快速了解如何构建我们的应用,所以只能一点点摸索,借鉴前人的经验,所幸尤大大有个使用Vue开发的Hacker News Clone,我们可以从这里吸收开发经验。另外Cnode社区也有个用Vue开发的客户端Vue-cnodejs也很不错。

这里首先简要介绍一些Hacker News 客户端中使用到的ES6特性:

=是匿名函数的一种简写,即lamda表达式,格式为( 形参列表 ) = { 函数体 },使用箭头函数,内部函数继承了外围作用域的this值,再也不用写var that=this这种hack代码了。直接上代码看:

在ES6之前js没有一个统一的模块定义方式,流行的定义方式有AMD,CommonJS等,而ES6从语言层面对定义模块的方式进行了统一。

默认加载的好处是我们不需要知道模块所要加载的变量名或函数名,输出时指定任意名字,且不需要大括号。更详细的可以查看阮一峰老师的module一节

const即常量,一旦定义了即不可变。let是更好的var,由于js的设计缺陷,var变量的作用域是函数体的全部,还有变量提升等怪异特性,导致诡异的错误,极难定位bug。而let拥有块级作用域,声明的全局变量不是全局对象的属性,形如for (let x…)的循环在每次迭代时都为x创建新的绑定.能用let尽量不用var,具体请看Is there any reason to use the “var” keyword in ES6?以及深入浅出ES6(十四):let和const

Vue-cli本身是一套技术选型,本身有作者自己的设计偏好在里面,例如模板默认是ES6的语法,使用ESLint进行代码规范等。在我开始使用这个工具的过程中有两个纠结的地方,一个是缩进,一个分号。

模板中默认代码使用的2个空格进行缩进,这没问题,问题是在ESLint的配置文件.eslintrc.js中写死了indent的规则,于是各种缩进必须按照规范来,不然就会出现多处如下的错误

用java习惯了,格式糟糕的话format一下就好了啊,然后各种查资料是用2个空格还是4个空格,可以看看知乎的这个回答为什么JS的规范说要用两个空格来缩进?,恩,看来写js代码用2个空格更流行一些。如果你用sublime,那么可以打开你一个js文件然后Preference – Settings More – Syntax Specfic-User,然后写入以下选项 :

同理对.vue也做一遍。不过萝卜青菜各有所爱,只要同意规范就好,如果还是希望使用4空格,可以编辑.eslintrc.js的indet项。

习惯了写分号,至今为止一直认为写分号会让代码清晰,不容易出错。不过在js这样不强制写分号的语言中需要另外考虑一番,可以看看知乎的这个问题:JavaScript 语句后应该加分号么?,于是又被尤大的答案折服了,ok,咱也不写分号了。更多的还是建议看尤大给的链接semicolons

好吧,在Building Large-Scale Apps中文档介绍了这种单文件的组件,它的特点是单文件组合HTML 模板,CSS和JS,并且可以使用自己想用的预处理器,并且css代码对于每个组件是隔离的,只能说Vue,就决定是你了!,例如:

恩,Vue-loader会自动帮你把这种单文件组件转成组件使用,我们就不用操心啦。当然尤大也不强制你把代码都放在一个文件里,可以拆开放:

更多内容可以看Vue-loader的官方文档,跟着做一遍可以加深印象,更了解webpack和vue的思想。

好吧,说了那么多,我们来开发一个基本的Login组件吧。目前网页设计水平还跟不上,直接使用Bootstrap的css库,在index.html的head标签中加入

前言 webpack2和vue2已经不是新鲜东西了,满大街的文章在讲解webpack和vue,但是很多内容写的不是…

最近看奇葩说看到这样的话题,催泪的一期,听到了太多的直戳到亲情心底的话。 人意识到自己长大了有很多点,有一种是老人…

喜欢你的笑容, 宽容, 美好; 喜欢你的心思, 细腻, 柔软; 喜欢你的善心, 清澈, 感动; 无论你在何方, 都…

临时起意把洪洞之行升级成了洪洞+霍州双日浪,然后就有了这些故事…给我的【伙伴们】… you are my …

今天终于到家了,回想一下暑假回家的历程,我只想感激路上的艰辛。 8月6日下午六点左右终于从九江登上开往北京的Z72…

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注