项目vue2.0仿外卖APP（一）

时间 2019-11-10

标签项目 vue2.0 vue 外卖 app 繁體版

原文原文链接

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

固然，这个过程会有点长，不过确实能学到不少东西。html

话很少说，立刻开始吧。前端

注：当咱们把用vue-cli脚手架搭建成的vue项目复制到其余地方时，要把node_modules目录删除，否则在其余地方没法执行cnpm run dev，这其中设计到路径的问题。删除以后要从新cnpm install。vue

https://segmentfault.com/q/1010000006912664node

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

一、项目介绍

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

MVVM架构：web

View和model经过viewModel来通讯，但数据发生变化，viewmodel可以观察到这种数据的变化，而后通知到对应的视图作自动更新；当用户操做view视图，viewModel也能监听到视图的变化，而后通知数据作改动，实现了数据的双向绑定。vue-router

应用场景：vue-cli

针对具备复杂交互逻辑的前端应用；

它能够提供基础的架构抽象；

能够经过AJAX数据持久化，保证前端用户体验

好处：

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

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

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

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

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

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

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

这个过程还包括：

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

代码规范：

项目中所用的代码大到架构设计、组件抽象、模块拆分、代码风格统1、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的双向绑定，就必需要实现如下几点：
一、实现一个数据监听器Observer，可以对数据对象的全部属性进行监听，若有变更可拿到最新值并通知订阅者
二、实现一个指令解析器Compile，对每一个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
三、实现一个Watcher，做为链接Observer和Compile的桥梁，可以订阅并收到每一个属性变更的通知，执行指令绑定的相应回调函数，从而更新视图
四、mvvm入口函数，整合以上三者

详情可查看：http://www.javashuo.com/article/p-brudryzf-hq.html

关于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