摘要：起初，項目使用的是，其提供的方法用著比較爽，由于項目的很多數(shù)據(jù)來自豆瓣的，直接上簡單方便，跨域什么的不考慮。跨域問題，上面已經(jīng)介紹，在不能操控的豆瓣數(shù)據(jù)上，使用的是。

項目地址 在線演示

不識廬山真面目，只緣身在此山中。

大概一個月前，開源了Vue重構(gòu)豆瓣移動端的項目，效果還可以，收到了很多小伙伴的反饋，話說是要寫一些文章的，但遲遲沒有動筆，估計小伙伴們等的花都謝了，拖延癥是病，需要治療...

接下來開始填坑，這一系列的文章會把在開發(fā)中遇到的問題總結(jié)下來。這篇文章是第一篇，是一些準(zhǔn)備工作，包括從idea到具體項目實現(xiàn)...

萬事開頭難，當(dāng)有idea從你腦海中閃過的時候，你第一個想到的應(yīng)該是:腳手架工具，快速生成基本的項目結(jié)構(gòu)，即刻上手。Vue官方就提供了方便易用的Vue-cli命令行工具，快速，高效，爽!

這個項目本身是基于Vue-cli的webpack模板，簡單的輸入一條命令vue init webpack my-project，便能生成一個使用webpack作為打包工具，具備熱重載，代碼檢查，css預(yù)處理等一系列功能的初始項目。

這一系列文章不會講webpack如何使用?有可能會涉及一些簡單的配置項。當(dāng)然，學(xué)習(xí)webpack能很好的理解和解決開發(fā)中遇到的問題，有需要可自行谷歌。
不過，也不必?fù)?dān)心，正如上面所說，即使你不了解webpack，你仍然可以用Vue-cli快速開發(fā)出高逼格Vue應(yīng)用。

來看看我們的目錄結(jié)構(gòu):

.
├── build                      // Webpack打包相關(guān)配置
├── config                     // 基本環(huán)境配置
├── index.html                 // 通用HTML模板
├── package.json               // 相關(guān)依賴
├── README.md                  // README
├── src                        // 源碼目錄
│   ├── App.vue                // 入口頁面
│   ├── assets                 // 靜態(tài)資源目錄
│   ├── components             // 全局公用組件目錄
│   │   ├── Banner.vue         // 廣告橫幅組件
│   │   ├── Card.vue           // 卡片組件
│   │   ├── DownloadApp.vue    // 底部app下載組件
│   │   ├── Group.vue          // 小組組件
│   │   ├── HeaderBar.vue      // 頂部導(dǎo)航組件
│   │   ├── List.vue           // 列表組件
│   │   ├── Rating.vue         // 星級評分組件
│   │   ├── Scroller.vue       // 橫向滾動組件
│   │   ├── Marking.vue        // 標(biāo)記組件
│   │   ├── SubNav.vue         // 二級導(dǎo)航組件
│   │   ├── Tags.vue           // 標(biāo)簽組件
│   │   ├── Types.vue          // 項目類型組件
│   │   └── UserBar.vue        // 用戶欄組件
│   ├── main.js                // 應(yīng)用初始化入口文件
│   ├── router                 // 路由目錄
│   │   └── index.js           // 路由配置
│   ├── store                  // Vuex全局狀態(tài)目錄
│   │   ├── index.js           // Store根文件
│   │   └── modules            // 模塊目錄
│   │       ├── activities.js  // 活動相關(guān)狀態(tài)
│   │       ├── book.js        // 書籍相關(guān)狀態(tài)
│   │       ├── group.js       // 小組相關(guān)狀態(tài)
│   │       ├── movie.js       // 電影相關(guān)狀態(tài)
│   │       ├── search.js      // 搜索相關(guān)狀態(tài)
│   │       ├── subject.js     // 主題相關(guān)狀態(tài)
│   │       └── user.js        // 用戶相關(guān)狀態(tài)
│   └── views                  // 視圖目錄
│       ├── BookView.vue       // 書籍視圖
│       ├── DetailView.vue     // 首頁活動詳情視圖
│       ├── GroupView.vue      // 小組視圖
│       ├── HomeView.vue       // 主頁視圖
│       ├── LoginView.vue      // 登錄視圖
│       ├── MovieView.vue      // 電影視圖
│       ├── PagesView.vue      // 綜合視圖
│       ├── RegisterView.vue   // 注冊視圖
│       ├── SearchView.vue     // 搜索視圖
│       ├── StatusView.vue     // 廣播視圖
│       ├── SubjectView.vue    // 主題視圖
│       └── TalionView.vue     // 覆蓋層視圖
└── static                     // 靜態(tài)文件目錄

能開始了嗎？。客官，莫急!

首先，我們要對寫的項目有一個整體的印象，哪些東西是公用的？可以抽離為組件的？哪些是一次性組件？這些組件之間是否擁有某種關(guān)系？通過怎樣的邏輯把他們關(guān)聯(lián)起來？哪些頁面是可重用的？又有哪些頁面需要同時顯示在視圖里？路由要怎么劃分？項目是否足夠的大？要不要統(tǒng)一狀態(tài)管理......

從上面結(jié)構(gòu)中可以看出，我們把一些可重用的或者是一次性組件寫在了src/components中。
把完全不同或者是關(guān)聯(lián)性不大的頁面獨立為不同的視圖放在src/views里，這些包含了一個個子組件的視圖同樣可視為組件。

上面結(jié)構(gòu)中對各個目錄和文件做了簡單的描述，可能有些不太精確，建議結(jié)合代碼來看。
關(guān)于視圖方面，主要想說一下PagesView視圖和TalionView視圖。TalionView在這里是作為彈出層，覆蓋在其他頁面之上，擁有較高的在z-index，其內(nèi)容包括了搜索框和一些快速導(dǎo)航。PagesView視圖，又對各個頁面做了一次組合，包括了頭部導(dǎo)航組件，路由出口，還有一個TalionView視圖。

為什么要這么做呢？
綜合項目所有視圖來看，除了登錄注冊頁面外，其他頁面的布局大致相同：頂部導(dǎo)航+中間內(nèi)容視圖+覆蓋層。這在無形中通過視圖將此項目分成了兩大模塊：登錄注冊類無通用樣式模塊，和具備通用公共樣式的普通模塊。

當(dāng)然這樣劃分的另一個基礎(chǔ)是對路由的配置。接下來，我們來看看路由，進(jìn)行進(jìn)一步解釋。

先瞄一眼我們的路由配置：

routes: [
    {                           // [1]
      path: "/",
      redirect: "/pages/"
    },
    {                           // [2]
      path: "/pages",
      component: PagesView,
      children: [
        {
          path: "",
          redirect: "/pages/home"
        },
        {
          path: "home",
          name: "HomeView",
          component: HomeView
        },
        {
          path: "movie",
          name: "MovieView",
          component: MovieView
        },
        ......
        {
          path: "detail/:id",
          name: "DetailView",
          component: DetailView
        }
      ]
    },
    {                           // [3]
      path: "/pages/:classify/subject/:id",
      name: "SubjectView",
      components: {
        default: PagesView,
        subject: SubjectView
      }
    },
    {                           // [4]
      path: "/search",
      name: "SearchView",
      components: {
        default: PagesView,
        search: SearchView
      }
    },
    {                           // [5]
      path: "/login",
      name: "LoginView",
      component: LoginView
    },
    {                           // [6]
      path: "/register",
      name: "RegisterView",
      component: RegisterView
    },
    {                           // [7]
      path: "*",
      redirect: "/pages/"
    }
  ]

路由的匹配規(guī)則是自上而下的，第一條[1]規(guī)則對路由進(jìn)行了重定向。接著，第二條[2]，對應(yīng)了組件PagesView，其中又包含了若干條子路由。這相當(dāng)于上面描述的第一類模塊，擁有統(tǒng)一的視圖，子路由的路由出口為本組件PagesView中定義的。而這一個聚合的擁有子路由和子視圖的模塊對應(yīng)的路由出口為入口文件App.vue中定義的無名路由出口。

可以看到在App.vue中還有兩個具名的路由出口：name="subject"和name="search"。subject出口對應(yīng)的路由為[3]，是電影，圖書等的詳情頁面，是不是覺得可以把它劃分到[2]中的子路由中？完全可以，但這里沒有這么做，為了將視圖和路由對應(yīng)起來，擁有一個好看直觀的路徑，所以就抽了出來，多帶帶配置了，是不是有點蛇精病...回正題，為了同時（同級）展示多個視圖，而不是嵌套展示，我們配置了components，將PagesView和SubjectView同時展示在視圖中。search路由也做了同樣的處理。

5為登錄注冊路由，只在視圖中展示了各自對應(yīng)的單個組件，不再受約束。自由發(fā)揮...

最后一條路由[7]，相當(dāng)于404頁面，在以上所有路由都不匹配的情況下，重定向到404頁面，這里又把它重定向到了主頁，是不是很機(jī)智...

數(shù)據(jù)驅(qū)動應(yīng)用，當(dāng)我們的應(yīng)用越來越大時，對數(shù)據(jù)的操控將會越來越復(fù)雜。那么，我們到底需要不需要集中式的狀態(tài)管理(Vuex)？

Flux 架構(gòu)就像眼鏡：您自會知道什么時候需要它。 --Dan Abramov

對于組件來說，如果，數(shù)據(jù)本身高度隸屬于本組件，那么，直接封裝在組件里將是一個好的選擇。當(dāng)父子組件之間共享數(shù)據(jù)，我們也能通過props和自定義事件解決。即使組件越來越多，視圖越來越多，如果彼此之間并無太大聯(lián)系，我們也沒有必要使用Vuex。

稍微吐槽一下本項目：除了用戶模塊和搜索模塊的狀態(tài)之外，其他的狀態(tài)是沒有必要一定使用Vuex的。電影數(shù)據(jù)，圖書數(shù)據(jù)，小組數(shù)據(jù)等是一次性數(shù)據(jù)，什么時候訪問就什么時候呈現(xiàn)，頂多會通過路由傳遞一些必要的參數(shù)。即是說，其他視圖不依賴這些數(shù)據(jù)，它本身也不需要來自其他視圖的狀態(tài)，并且這些狀態(tài)并不影響全局狀態(tài)。這個時候你不必使用Vuex。但你這里使用了，作何解釋呢？的確，Vuex很酷，我想試試。沒別的理由。我能清楚明了的查看每一個組件的狀態(tài)，掌控全局，這的確很酷。

吐槽完了！回正題。現(xiàn)在假設(shè)我們的項目足夠大了(接著更新說不定就大了哦-_-!)。組件，視圖多的數(shù)不過來，并且他們之間的關(guān)系錯綜復(fù)雜。整個應(yīng)用也需要記錄和維護(hù)更多的復(fù)雜的全局狀態(tài)。現(xiàn)在我們有了Vuex，我們把共享狀態(tài)抽取出來，以一個全局單例模式管理。我們的應(yīng)用構(gòu)成一張巨大的蜘蛛網(wǎng)，而不論網(wǎng)的哪一個節(jié)點都能訪問狀態(tài)。描述為星型拓?fù)浣Y(jié)構(gòu)更容易理解一些吧。

為了防止單一的狀態(tài)集中到一個文件中而變得冗余，難以維護(hù)，我們進(jìn)一步的將狀態(tài)分割成了模塊，這些模塊和視圖一一對應(yīng)，這樣代碼就變得更結(jié)構(gòu)化，且非常容易維護(hù)了。

│   ├── store                  // Vuex全局狀態(tài)目錄
│   │   ├── index.js           // Store根文件
│   │   └── modules            // 模塊目錄
│   │       ├── activities.js  // 活動相關(guān)狀態(tài)
│   │       ├── book.js        // 書籍相關(guān)狀態(tài)
│   │       ├── group.js       // 小組相關(guān)狀態(tài)
│   │       ├── movie.js       // 電影相關(guān)狀態(tài)
│   │       ├── search.js      // 搜索相關(guān)狀態(tài)
│   │       ├── subject.js     // 主題相關(guān)狀態(tài)
│   │       └── user.js        // 用戶相關(guān)狀態(tài)

不要為了用vuex而用vuex

如果應(yīng)用確實不大，只是有一些多層嵌套組件，兄弟組件之間傳遞狀態(tài)的需求，使用事件總線global event bus就ok啦！如果需要構(gòu)建一個中大型應(yīng)用，為了更好地管理狀態(tài)，上Vuex。至于，不要為了用vuex而用vuex，只要你覺得用著爽，拿來用又何妨！

Ajax庫的選擇是比較自由的。起初，項目使用的是vue-resource，其提供的jsonp方法用著比較爽，由于項目的很多數(shù)據(jù)來自豆瓣的api，直接上jsonp簡單方便，跨域什么的不考慮。你很機(jī)智嘛！vue-resource不支持服務(wù)端渲染，官方也不再推薦vue-resource。但這個不影響它的使用，如果你喜歡，接著用也沒有問題。這里我將vue-resource的版本released出來：The last version of vue-resource

花了一點時間，遷移到了Superagent，準(zhǔn)備做一些有趣的事情。和axios基本相同，很明顯axios更火，axios的文章也更多一點，有的選未必不好。Superagent是在寫express時接觸的，前后端通用，作者殺馬特TJ，用了一段時間，還不錯。現(xiàn)在拿來和vue一塊用，更親切。
Superagent的api簡單易用，能滿足大多數(shù)應(yīng)用需求，輕量級，支持ssr，可擴(kuò)展性強(qiáng)。Superagent和axios的核心都不支持jsonp，這里采用了Superagent的插件superagent-jsonp。

我們可以這么使用：

import request from "superagent"
import jsonp from "superagent-jsonp"

request
    .get("https://api.douban.com/v2/event/list?loc=108288&start=" +
       state.skip + "&count=3")
    .use(jsonp)
    .end((err, res) => {
        if (!err) {
          commit({
            type: "loadMore",
            res: res.body.events
          })
        }
    })

有關(guān)于Superagent的更多問題可以閱讀官方文檔或參考本項目源碼。

登錄注冊部分只簡單的在前后端做了基本檢驗，更嚴(yán)格的表單驗證，沒有做。社區(qū)里表單驗證的插件也很多，vee-validate比較好用，就不多說了，如果有需要可以仔細(xì)閱讀文檔。這里先挖個坑，我想再造個輪子，試一試...
我暫時總結(jié)了一些關(guān)于表單驗證的關(guān)鍵詞，算是占個坑吧！

冗余，遠(yuǎn)程，時機(jī)，分離，集中式管理，重用，可配置，順序，自定義，字段消毒，隨機(jī)補(bǔ)充規(guī)則，優(yōu)雅

我去！要求很多嘛...

數(shù)據(jù)來源，分兩個部分，一個是豆瓣的api：Douban Api V2，另一個是mock的一些數(shù)據(jù)：Douban Backend。采用express手寫完成。跨域問題，上面已經(jīng)介紹，在不能操控的豆瓣數(shù)據(jù)上，使用的是jsonp。部署在heroku上的mock數(shù)據(jù)服務(wù)，完全可控，采用cors，借助cors模塊完成。當(dāng)然，方法很多，你的地盤，你做主。

在構(gòu)建成功之后，我們將dist/中的文件發(fā)布到我們已經(jīng)準(zhǔn)備好的服務(wù)器上。
在發(fā)布中會遇到兩個常見的問題：

第一：npm run build后，項目部署到服務(wù)器，訪問頁面空白？
由于項目是用vue-cli構(gòu)建，我們并沒有對項目做任何配置，盡管默認(rèn)配置下它工作的很好。看控制臺，報錯，一連串的404，文件找不到。js沒加載上，vue沒有初始化，頁面自然空白。
解決方法：把congif/目錄下index.js中build的assetsPublicPath改為 ./ ，然后重新npm run build。

第二：assetsPublicPath配置正確，頁面依舊空白？
查看路由配置信息：mode: "history"啟用了History模式。使用 history 模式時，URL 就像正常的 url，不過這種模式要玩好，還需要后臺配置支持，vue-router文檔給出了不同服務(wù)器的簡單配置：HTML5 History 模式

發(fā)布到github pages上：
github pages用來展示項目再好不過了。不過，我們沒辦法做服務(wù)器配置，HTML5 History 模式要舍棄了，頁面的滾動行為的體驗差點也沒關(guān)系，關(guān)于這兩點有后續(xù)文章。
npm run build后通過下面git命令發(fā)布：

git add -f dist
git commit -am "Update live demo"
git subtree push --prefix dist origin gh-pages

這是第一篇，比較雜亂一些，寫了這么長，希望對你有所幫助。如果你在查看這個項目，或閱讀本文章時有什么問題可以直接聯(lián)系我或到項目地址提交英文issue，歡迎各位小伙伴前來斧正，不勝感激......項目，系列文章將會持續(xù)更新，拖延癥也在治療中...

本文首發(fā)于簡書?
作者：jeneser
Github：https://github.com/jeneser
版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）