尋找項目

Android Studio 默認(rèn)生成的 project，我們一般不會直接拿來用，會在做一些分包，對工程結(jié)構(gòu)進(jìn)行一定的修改。
同理，Vue 也是如此，所以說如果我們在項目中使用時，會對工程結(jié)構(gòu)進(jìn)行一定的重建。
那我們就從 Github 上找一個開源的 Vue Project 來看下他們的項目結(jié)構(gòu)是怎么樣的。

條件

由于我們剛?cè)?Vue 沒多久，項目必須有這幾個條件：

• 項目不復(fù)雜，簡單易懂
• 雖然簡單，但是必須要包含日常開發(fā)中所需要的 vue 知識點和庫
• Star 的數(shù)量必須多，保證質(zhì)量
• 使用的是 vue 2.0

項目簡介

Star 的數(shù)量.png

非常簡單的一個vue2 + vuex的項目，整個流程一目了然，麻雀雖小，五臟俱全，適合作為入門練習(xí)。

非常符合我們的條件。

地址

vue2-happyfri

效果圖

vue2-happyfri.gif

項目分析

項目結(jié)構(gòu)

從上篇文章我們知道，我們只要重點關(guān)注：

• src 目錄
• 根目錄下的 index.html

根目錄下的 index.html

index.html 里面除了一堆的 <meta> 標(biāo)簽外，就是配置了一個路由

    <div id="app">
        <router-view></router-view>
    </div>

router-view 是 Vue 的 路由庫，官方文檔解釋如下：

對于大多數(shù)單頁面應(yīng)用，都推薦使用官方支持的 vue-router 庫。更多細(xì)節(jié)可以看 vue-router 文檔。

PS:

<meta> 元素可提供有關(guān)頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞。
<meta> 標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容。<meta> 標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對。
From w3school

src 目錄

src 目錄才是我們的重點，該工程的主體結(jié)構(gòu)如下：

• components：由上面效果圖可以看出，該項目主要由首頁、內(nèi)容頁面、得分頁面三個頁面組成，對應(yīng)于 - page 里面的三個頁面，由于有很多相同的內(nèi)容，所以抽取一個類似 BaseActivity 的通用頁面出來，存放在 components文件夾下。
• config ：下面的是網(wǎng)絡(luò)請求 ajax 的一些配置，可以忽略。
• images ：是一些本地圖片，也可以忽略。
• page：業(yè)務(wù)模塊三個頁面，分別是首頁、答題頁面、得分頁面。
• router：Vue 的全局路由統(tǒng)一管理。
• store：vue 的統(tǒng)一狀態(tài)存儲，使用 Vuex 。
• style：項目中統(tǒng)一 css 樣式抽取。

跟腳手架自動生成的目錄對比，多了個：

vue-router + Vuex

這個兩個庫也是 Vue 官方推薦我們在復(fù)雜一點的項目中使用的，就跟 Android 的 MVP 一樣，最大的好處就是解耦。

END

vue 的官方文檔是我見過寫的最好的開發(fā)文檔，基本看一遍官方文檔，再看幾個開源項目就可以模仿著開發(fā) Vue了。
最后再附上一個不是很難又很實用的開源項目：

eleme