Vue:基于Vue2的饿了么实战总结

前言

某课上有Vue前端饿了么实战项目,这个练习对于初学者来说再好不过了,美中不足的是,尽管该项目录制时间很新,16年11月份录制,然而当时Vue版本仍然停留在1.0,目前最新的版本已经更新到2.1.8一些API也有所修改,项目中也有些错误老师没来得及修正。我花了前后大概一周的时间,学习完了全部内容,并且将项目改造成了2.x版本,填补了许多因为版本升级留下的坑,这里做一个简单的总结,先来看看最终效果

首页

食品详情页

评价页

卖家详情页

最后两页就是完全自己写的了,因为,嘿嘿/滑稽

你能够学到的

Vue Webpack的相关配置

老师较为细致的讲解了Vue-Cli的webpack配置,你不需要会去,但是应该知道哪些模块用来干嘛的。

Mock

使用调试环境搭建的服务器模拟后台JSON数据请求,涉及node的express操作,不理解原理没关系,只要会配置模拟数据就好,当然,一个好前端,node还是需要学习的

Vue-Resource

虽然官方已经宣布不再维护了,但是2.x版本依然得到很好的支持,this.$http操作更符合Vue原生。你能够通过这个工具进行ajax操作

Vue-Router

官方的前端路由,虽然项目中只是简单视图切换,但你也应该基本了解前端路由基本原理,搭建出一般SPA应用

Vue基本API操作

基本项目学完以后,你就能对data,props,components,methods,created,nextTick,computed等等有深入的认识。可能在你以前阅读API中没能理解的模块有了清晰认知,也能信手拈来的进行应用。

CSS中的奇淫技巧

项目中老师用到了许多对于CSS样式细微操作,可能很多同学对于CSS不是很在乎,但是为了达到和设计图一样的效果,你想到的可能和表现出来的就不太一样。

debug

软件开发中很重要的一环,可能许多人在敲代码的时候自信心爆棚,但是进行调试的时候就会被各种bug崩溃。老师在敲代码的过程中也会出现许多的错误,而这些也正好我们新手所经常的遇到的,你见可以看见老师用什么思维去解决问题,调试台报错的问题很容易解决,难的是不报错的问题,更需要你从逻辑层面去思考。基本学习完成以后,你也能处理开发过程中遇到的绝大多数问题

你不能学到的

Vue的各类插件

老师基本只用了Vue的原生API就完成了整个项目,唯一应用的是better-scroll库,这个库有很多坑爹的地方,你需要靠自己进行调试

Vuex

Vuex 之于 Vue 就像 Redux 之于 React,处理复杂的组件数据交互。但是项目中只用刀了父子组件沟通,所以没有使用vuex

Vue-Router的高级操作

这个前端路由还有很多的能力,比如懒加载,命名路由,history模式等。如果你的项目中需要,你可能还是得参考API

表单控件操作

Vue对于表单控件使用了双向绑定,然而项目中没有需要输入的功能,因此没有包含此部分的练习

你可能遇到的坑

transition单独提出来

transition不再是绑定在某个div组件内,而是以

<transition name="fade"><div></div></transition>

进行包裹组件,使用CSS过渡在2.0中只是一个过渡状态,你需要指定样式的最终表现

单组件只能有一个root

<templete>
  <div></div>
</templete>

必须用一个标签包裹组件而不是并列的两个标签

v-el v-ref的移除

实战中老师使用v-el去获取DOM元素,2.x统一为ref,如果绑定的是html标签则获得的是DOM对象,是组件则获得组件实例

$dispatch的移除

老师在写小球动画的时候,用了事件派发去通知兄弟组件,2.x中已经彻底移除,想要获得相同效果的话需要创建一个空组件充当event bus,偷了个懒就没写。

better-scorll库的坑

这个库挺坑的,在食品详情页,第一次进入时候可以成功触发点击事件,但是之后就不行。因此,我让它每次进入食品详情页都新建一个bs对象,或许你会找到更好的方法

最后

如果你对于Vue并不熟悉,再或者你对JS的面向对象不熟悉,Array,String类型的原生操作不熟悉,ES6语法不熟悉,那么这个实战项目可能并不适合你。你还是需要深入学习javascript,然后再学习Vue的官方文档。总而言之,这个实战项目并不适合纯新手。 当然,如果你学习完整个项目以后,并且了解每一个模块的运行机制。那么你就瞥见了现代前端工程的开发模式,再去学习angular react 小程序便会得心应手了。 就是这样 :)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏阮一峰的网络日志

也许,DOM 不是答案

有一个词"手机网站"(mobile web),指供手机浏览的网站,但它是不存在的。 人们提到"移动互联网"的时候,其实专指另外一样东西:手机App。 ? 一、W...

3355
来自专栏岑志军的专栏

(1)越狱环境搭建

1634
来自专栏无原型不设计

UI设计规范:单选按钮 vs 复选框,没那么简单

无论是网页设计,还是移动app设计,都经常用到单选按钮和复选框这两个组件。这两个组件看似意义明确,很好区分,但在实际设计中却很容易用错,带来不好的用户体验。 ...

2913
来自专栏程序员的知识天地

一个Mac系统,能让程序员编程效率提升30%

Mac 系统一向以提供高效的工作环境著称,iOS、Android和服务端程序员都可以轻松的在Mac上搭建舒适的开发环境。

2362
来自专栏java一日一条

为什么JavaScript开发如此疯狂

Web开发中其他一切对你而言都是小菜一碟,但当你深入探究JavaScript的时候,不免有一种“众人皆醒你独醉”的悲壮——好像其他人都知道你不知道的一些大的基础...

882
来自专栏HTML5学堂

聊一聊“@font-face”

在@font-face处理兼容中出现了一个#iefix这个东东?到底是神马东西呢? 案例: ? 首先先了解关于@font-face的基本知识 1、@font-...

3065
来自专栏ytkah

html5开发制作,漂亮html5模板欣赏,H5网站建设

html5是什么? HTML5 是下一代的 HTML(超文本标记语言,网页的组成部分),HTML5是web开发世界的一次重大的改变,能适配pc、手机等各终端,跨...

1.3K6
来自专栏Material Design组件

Human Interface Guidelines —— 状态栏(Status Bars)

2886
来自专栏皮振伟的专栏

[qemu][vnc]虚拟化平台上远程连接遇到的几个问题分析

前言: 虚拟化平台上,不管是调试,还是实际使用,都离不开远程连接。在使用vnc、spice的时候,遇到过一些问题。 分析: 1,frame buffer 先说...

1.1K7
来自专栏原创

基于AngularJS的个推前端云组件探秘

AngularJS是google设计和开发的一套前端开发框架,他能帮助开发人员更便捷地进行前端开发。AngularJS是为了克服HTML在构建应用上的不足而设计...

5218

扫码关注云+社区

领取腾讯云代金券