項目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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。