专栏首页不止是前端Vue:基于Vue2的饿了么实战总结

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 条评论
登录 后参与评论

相关文章

  • TypeScript 在 Vue 的实践

    在 vue-cli 3.0 的脚手架出来以后,官方我们提供了一套 Vue 的 TypeScript 模板,解决了许多模块以及类型问题,官方的东西真香,因此可以使...

    MrTreasure
  • Vue:VSCode完美配置指南

    MrTreasure
  • API网关的常用功能及架构图

    MrTreasure
  • 那个男人 他带着Vue3来了~

    其实Vue3.0版本发布的消息,我是昨天晚上刷朋友圈看到的(已经差不多凌晨 1 点了),然后我就立刻起来,打开电脑,看了一下github,把官方发布文档过了一遍...

    前端森林
  • vue小白快速入门

    一、vue是什么 Vue 是一套用于构建用户界面的渐进式框架。 压缩后仅有17kb 二、vue环境搭建 你直接下载并用 <script> 标签引入,Vue 会被...

    柴小智
  • Vue.js入门教程-组件注册

    创建Vue的组件都有三个基本步骤是 【①创建组件构造器、②注册组件和③使用组件】。

    WEBING
  • Vue CLI使用

    如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI。如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI,使用Vue.js开...

    说故事的五公子
  • Vue2.x 的笔记:第一次的感受 Vue 开篇

    在互联网高速发现的今天,可以说每天都在变化着一不留神你就会错过一个亿,所以你不得不时刻的保持着高度的专注。

    六小登登
  • 34条我能告诉你的Vue之实操篇

    这样一来 this.title 就直接拿到从父组件中传过来的 title 的值了。注意,你不应该在子组件内部直接改变 prop,这里就不多赘述,可以直接看官网介...

    童欧巴
  • [Vue 牛刀小试]:第十六章 - 针对传统后端开发人员的前端项目框架搭建

      在之前学习 Vue 基础知识点的文章中,我们还是采用传统的方式,通过在 html 页面上引用 vue.js 这个文件,从而将 Vue 引入到我们的项目开发中...

    程序员宇说

扫码关注云+社区

领取腾讯云代金券