最近在学习慕课网的课程:用vue.js做一个仿饿了么外卖APP的项目,现在也把流程啊什么的暂时先整理一下在这个博客上面。

当然,这个过程会有点长,不过确实能学到很多东西。

话不多说,马上开始吧。

注:当我们把用vue-cli脚手架搭建成的vue项目复制到其他地方时,要把node_modules目录删除,不然在其他地方无法执行cnpm run dev,这其中设计到路径的问题。删除之后要重新cnpm install。

https://segmentfault.com/q/1010000006912664

https://www.zhihu.com/question/41409670?sort=created

1、项目介绍

选用当前最火的MVVM框架作为这个项目的技术栈

MVVM架构:

View和model通过viewModel来通信,但数据发生变化,viewmodel能够观察到这种数据的变化,然后通知到对应的视图做自动更新;当用户操作view视图,viewModel也能监听到视图的变化,然后通知数据做改动,实现了数据的双向绑定。

应用场景:

针对具有复杂交互逻辑的前端应用;

它可以提供基础的架构抽象;

可以通过AJAX数据持久化,保证前端用户体验

好处:

当前端和数据做一些操作的时候,可以通过AJAX请求对后端做数据持久化,不需要刷新整个页面,只需要改动DOM里需要改动的那部分数据。特别是移动端应用场景,刷新页面太昂贵,会重新加载很多资源,虽然有些会被缓存,但是页面的DOM,JS,CSS都会被页面重新解析一遍,因此移动端页面通常会做出SPA单页应用。

Vue.js的特点:MVVM框架、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

核心思想:数据驱动、组件化。

该项目只提取饿了么其中一个模块--商家模块进行开发

项目开发的一个完整流程:

项目的需求分析--脚手架工具--数据mock--架构设计--代码编写--自测--编译打包等方面完全简讲述开发一个web的全流程,更好地了解一个项目从0到1的过程。

当然这个项目在开发中也会以线上生产环境的代码质量来要求。

这个过程还包括:

代码开发及测试环节:以像素级完美还原UI设计图;以真实外卖APP数据做演示,以保证代码无兼容性问题。

代码规范:

项目中所用的代码大到架构设计、组件抽象、模块拆分、代码风格统一、JS变量命名规范、CSS代码规范。致于编写高可维护、易于拓展、通用性强的代码,了解真实互联网公司是如何开发前端项目的。

所需技术:

流程及开发方法:

项目完整的开发流程;组件化、模块化的开发模式;使用Vue-cli脚手架初始化Vue.js项目;webpack的打包原理;模拟json后端数据,前后端分离开发;es6+eslint的开发方式。

第三方组件:

使用stylus编写模块化的CSS;使用vue-router开发单页应用;使用vue-resource与后端数据交互;在Vue.js框架里和第三方JS插件交互。

设计思想与模式:

使用Vue.js的过渡编写酷炫的交互动画;移动端设备像素比;制作并使用图标字;解决移动端1px边框问题;移动端经典的css sticky footer布局;flex弹性布局。

关于Vue的数据驱动思想

在数据驱动的思想里,数据驱动DOM变化,DOM是数据的一种自然映射。

如果没有MVVM框架,数据和视图是如何交互的?

比如通过AJAX从后端获取数据,会让视图改变,通过手动触发DOM的改变;再比如我们通过前端交互改变一些数据,为了让视图也发生变化,仍然需要通过手动触发进行DOM改变。手动改变DOM不仅繁琐,还容易出错。用了vue之后就可以省去操作DOM变化的步骤了。

在vue.js中,可以通过directives指令去对DOM做一层封装,当数据发生变化,会通知指令去修改对应的DOM。

Vue.js还会对操作做监听,当我们修改视图的时候,vue.js监听到这些变化,从而改变数据。

这个工程就实现了数据的双向绑定。

vue.js数据响应的原理:

vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

思路整理

已经了解到vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的,无疑这个方法是本文中最重要、最基础的内容之一,如果不熟悉defineProperty,猛戳这里
整理了一下,要实现mvvm的双向绑定,就必须要实现以下几点:
1、实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
3、实现一个Watcher,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图
4、mvvm入口函数,整合以上三者

详情可查看:https://segmentfault.com/a/1190000006599500

关于vue组件化的思想

目的:拓展HTML元素,封装可重用代码

如下图:左侧是一个页面,被拆分成小的区块,每个区块对应一个组件,组件可以嵌套,最终组合成为一个完整页面。

在vue.js中,每个组件都对应一个viewModel,最终生成一个viewModel的树:

组件设计原则:

页面上每一个独立的可视/可交互区域都可以视为一个组件。比如一个页面的header、footer等等;

每个组件对应一个工程目录,组件所需要的各种资源在这个目录下就近维护。就近维护原则就体现了前端工程化思想,每个开发者都知道自己所开发的单元,代码存在对应的组件目录中。在vue.js中可以通过.vue文件来实现;

页面不过是组件的容器,组件可以嵌套自由组合形成完整地页面。在本次项目开发中,会拆分成一个个组件。

可以参考:Vue.js:轻量高效的前端组件化方案

组件化讲解

一个简单的HTML页面,以此为基础:

<!DOCTYPE html>
<html>
<head>
<title>揭开Vue组件的神秘面纱</title>
</head>
<body>
//这中间就是实例挂载点的实例边界
<div id="vueInstance"></div> <script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script> <script>
// 创建一个新的Vue实例,并设置挂载点
var V = new Vue({
el : '#vueInstance'
});
</script>
</body>
</html>

在Vue中,可以使用Vue.component()来创建和注册你的组件,这个构造器有两个参数:组件的名字;包含组件参数的对象。

这个对象有点像Vue()构造器里的对象,它也有类似于Vue()里的el属性和data属性,但是又有点不一样。

  • Vue()构造器的el和data可以是对象。
  • Vue.component()构造器的el和data只能是函数。

接下来注册一个组件。创建并传入两个参数:组件的名字:'mine';包含组件参数的对象:这个对象包含一个属性'template'。

Vue.component('mine',{
template : '<p>My name is Appian.</p>'
})

现在你已经有了自己的一个组件了,你可以在你的应用的任何地方使用它。只要你调用它的唯一标识(就是组件名字),并用普通html标签的格式来书写,比如<mine></mine>,组件上注册的内容就会在你的自定义标签的地方插入。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件</title>
</head>
<body>
<div id="vueInstance">
<mine></mine>
<mine></mine>
<mine></mine>
</div>
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<script>
Vue.component('mine',{ //这里就是注册的内容
template : '<p>My name is Vue.</p>'
});
// 创建一个新的Vue实例,并设置挂载点
var V = new Vue({
el : '#vueInstance'
});
</script>
</body>
</html>

利用template标签处理复杂组件

如果总是在vue.component()构造器里写html代码,复杂页面就不得了了。为了避免上面的这种情况,所以我们可以用template标签(注意属性和标签是不一样的)来达到我们的目的。我们可以在页面的任何地方,定义template标签,并在template标签内,写好我们的模板。因为template标签在页面加载的时候不会渲染出来,只有在我们需要它的时候,这个标签内的内容才会被渲染出来。所以,你可以把template标签放在任何地方,并给它一个id,以便在组件注册的时候能够找到模板。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件</title>
</head>
<body>
<div id="vueInstance">
<mine></mine>
</div> <template id="myVue">
<p>i am vue</p>
<p>welcome!</p>
</template> <script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<script>
Vue.component('mine',{ //这里就是注册的内容
template : '#myVue'
});
// 创建一个新的Vue实例,并设置挂载点
var V = new Vue({
el : '#vueInstance'
});
</script>
</body>
</html>

通过props向组件中传递数据

Vue是处理父组件向子组件中传递数据是通过props。

Vue.component('mine',{
template : '<p>Appian is from {{ city }}.</p>',
props : ['city']
});

props可以是数组,也可以是对象。

那父组件那里又是怎么指派字段给子组件的呢?

<mine city="welcome"></mine>   

更多详细内容可以阅读:http://www.jianshu.com/p/a58a12f0abd1

项目vue2.0仿外卖APP(一)的更多相关文章

  1. 项目vue2.0仿外卖APP(六)

    goods 商品列表页开发 布局编写 除了商品之外还有购物车,还有个详情页,挺复杂的. 两栏布局:左侧固定宽度,右侧自适应,还是用flex. 因为内容可能会超过手机高度,超过就隐藏.左右两侧的内容是可 ...

  2. 项目vue2.0仿外卖APP(五)

    header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...

  3. 项目vue2.0仿外卖APP(四)

    组件拆分 先把项目搭建时生成的代码给清了吧 现在static目录下引入reset.css 接着在index.html引入,并且设置<meta> 有时候呢,为了让代码符合我们平时的编码习惯, ...

  4. 项目vue2.0仿外卖APP(二)

    vue-cli开启vue.js项目 github地址:https://github.com/vuejs/vue-cli Vue.js开发利器vue-cli,是vue的脚手架工具. 在工地上,脚手架是工 ...

  5. 项目vue2.0仿外卖APP(三)

    项目的结构如下:                   项目资源准备 准备项目的各种图片资源等等 注意:在webpack可以不用css sprite,直接用单张图片,因为它会帮忙打包. 还有SVG图片, ...

  6. 项目vue2.0仿外卖APP(七)

    ratings评价列表页实现 在ratings.vue组件里开发 首先先引入seller数据: 书写模板结构: 由于评价页又有之前写过的star.vue组件,所以又要在ratings.vue组件引入: ...

  7. Vue2.0仿饿了么webapp单页面应用

    Vue2.0仿饿了么webapp单页面应用 声明: 代码源于 黄轶老师在慕课网上的教学视频,我自己用vue2.0重写了该项目,喜欢的同学可以去支持老师的课程:http://coding.imooc.c ...

  8. vue2.0仿今日头条开源项目

    vue-toutiao 这是用 vue.js 2.0 高仿 今日头条 的移动端项目,结合了原生app的部分功能以及网页版. 前言 本人是 今日头条 的重度用户,在学习vue.js过程中,在GitHub ...

  9. vue2.0:(一)、vue的安装和项目搭建(以外卖app项目举例)

    vue系列踩坑大作战由此就要开始了,准备好了吗,和我一起踩坑,学会vue吧.同时,也欢迎大家把自己遇到的坑发出来,让更多的人学会vue,因为我深知前端学习新框架不容易,尤其是我这种半路出家的女前端.不 ...

随机推荐

  1. java 经典程序 100 例

    1,编写程序,判断给定的某个年份是否是闰年.闰年的判断规则如下:( 1)若某个年份能被 4 整除但不能被 100 整除,则是闰年.( 2)若某个年份能被 400 整除,则也是闰年. import ja ...

  2. 简易的轮廓边生成(N和V dot点乘方式)(surface方式和vs ps 方式的分别实现)

    一.前面心情 1.公司我的架构发生变动,从技术中心到项目组了,但不管怎么样,该看的还要看,总会用到 二.实现 三.参考: http://blog.csdn.net/cubesky/article/de ...

  3. ESXi5.5下的Centos7虚机配置静态IP

    使用的是osboxes.org上下载的已安装centos7 image, 在启动后, ifconfig不能看到网卡, 需要关机后在ESXi客户端编辑虚机, 删除网卡, 保存, 添加网卡, 网卡类型选择 ...

  4. 从梯度下降到Fista

    前言: FISTA(A fast iterative shrinkage-thresholding algorithm)是一种快速的迭代阈值收缩算法(ISTA).FISTA和ISTA都是基于梯度下降的 ...

  5. win7 cmd 操作mysql数据库

    一 ,对MySql服务器的开启,重启,关闭等操作       当然,可以在win7的界面环境下,关闭或开启MySql服务.但是经常找不到win7的服务管理器,主要定位方法有二:命令行下输入servic ...

  6. Monk快速开发框架前期约定

    命名规则 后端命名(统一采用[前缀]骆驼命名) 所有类都必须以首字母大写开头 接口必须以I开头 业务逻辑或业务接口必须以Services结尾 数据仓储或仓储接口必须以Repository结尾 所有特效 ...

  7. Neural Style学习1——简介

    该项目是Github上面的一个开源项目,其利用卷积神经网络的理论,参照论文A Neural Algorithm of Artistic Style,可以实现一种效果:两张图片,一张取其内容,另一张取其 ...

  8. Win10 PC一周年更新正式版14393.447 32位/64位更新补丁KB3200970下载 Flash补丁Kb3202790下载

    微软在今天凌晨推送了Win10 PC一周年更新正式版14393.447,本次更新补丁代号为KB3200970,面向Win10一周年更新正式版的PC用户. 更新日志 • 提升了多媒体音频.远程桌面以及I ...

  9. css 拾遗

    1, 实现尖角 <style> .up{ border-top: 30px solid red; border-right:30px solid gold; border-bottom:3 ...

  10. 【BZOJ-1419】Red is good 概率期望DP

    1419: Red is good Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 660  Solved: 257[Submit][Status][Di ...