專案包含：

• 基礎庫: vue.js、vue-router、vuex、whatwg-fetch
• 編譯/打包工具：webpack、babel、node-sass
• 單元測試工具：karma、mocha、sinon-chai
• 本地伺服器：express

build：最終釋出的程式碼的存放位置。
  config：配置路徑、埠號等一些資訊，我們剛開始學習的時候選擇預設配置。
  node_modules：npm 載入的專案依賴模組。
  src：這裡是我們開發的主要目錄，基本上要做的事情都在這個目錄裡面，裡面包含了幾個目錄及檔案：
  assets:放置一些圖片，如logo等
  components:目錄裡放的是一個元件檔案，可以不用。
   App.vue：專案入口檔案，我們也可以將元件寫這裡，而不使用components目錄。
   main.js ：專案的核心檔案
   static：靜態資源目錄，如圖片、字型等。
   test：初始測試目錄，可刪除
   .XXXX檔案：配置檔案。
   index.html：首頁入口檔案，可以新增一些meta資訊或者同統計程式碼啥的。
   package.json：專案配置檔案。
   README.md：專案的說明檔案。

目錄結構

1. ├── README.md 專案介紹

2. ├── index.html 入口頁面

3. ├── build 構建指令碼目錄

4. │   ├── build-server.js 執行本地構建伺服器，可以訪問構建後的頁面

5. │   ├── build.js 生產環境構建指令碼

6. │   ├── dev-client.js 開發伺服器熱過載指令碼，主要用來實現開發階段的頁面自動重新整理

7. │   ├── dev-server.js 執行本地開發伺服器

8. │   ├── utils.js 構建相關工具方法

9. │   ├── webpack.base.conf.js wabpack基礎配置

10. │   ├── webpack.dev.conf.js wabpack開發環境配置

11. │   └── webpack.prod.conf.js wabpack生產環境配置

12. ├── config 專案配置

13. │   ├── dev.env.js 開發環境變數

14. │   ├── index.js 專案配置檔案

15. │   ├── prod.env.js 生產環境變數

16. │   └── test.env.js 測試環境變數

17. ├── mock mock資料目錄

18. │   └── hello.js

19. ├── package.json npm包配置檔案，裡面定義了專案的npm指令碼，依賴包等資訊

20. ├── src 原始碼目錄

21. │   ├── main.js 入口js檔案

22. │   ├── app.vue 根元件

23. │ ├── components 公共元件目錄

24. │   │   └── title.vue

25. │   ├── assets 資源目錄，這裡的資源會被wabpack構建

26. │   │   └── images

27. │   │   └── logo.png

28. │   ├── routes 前端路由

29. │   │   └── index.js

30. │   ├── store 應用級資料（state）

31. │   │   └── index.js

32. │   └── views 頁面目錄

33. │   ├── hello.vue

34. │   └── notfound.vue

35. ├── static 純靜態資源，不會被wabpack構建。

36. └── test 測試檔案目錄（unit&e2e）

37. └── unit 單元測試

38. ├── index.js 入口指令碼

39. ├── karma.conf.js karma配置檔案

40. └── specs 單測case目錄

41. └── Hello.spec.js

環境安裝

本專案依賴 node.js， 使用前先安裝 node.js 和 cnpm（顯著提升依賴包的下載速度）。

1. 然後安裝 cnpm 命令：

    npm install -g cnpm --registry=https://registry.npm.taobao.org
   

快速開始

1. git clone https://github.com/hanan198501/vue-spa-template.git

2. cd vue-spa-template

3. cnpm install

4. npm run dev

命令列表：

1. #開啟本地開發伺服器，監控專案檔案的變化，實時構建並自動重新整理瀏覽器，瀏覽器訪問 http://localhost:8081

2. npm run dev

3. #使用生產環境配置構建專案，構建好的檔案會輸出到 "dist" 目錄，

4. npm run build

5. #執行構建伺服器，可以檢視構建的頁面

6. npm run build-server

7. #執行單元測試

8. npm run unit

前後端分離

專案基於 spa 方式實現前後端分離，伺服器通過 nginx 區分前端頁面和後端介面請求，分發到不同服務。前端物理上只有一個入口頁面, 路由由前端控制（基於vue-router），根據不同的 url 載入相應資料和元件進行渲染。

介面 mock

前後端分離後，開發前需要和後端同學定義好介面資訊（請求地址，引數，返回資訊等），前端通過 mock 的方式，即可開始編碼，無需等待後端介面 ready。 專案的本地開發伺服器是基於 express 搭建的，通過 express 的中介軟體機制，我們已經在 dev-server 中添加了介面 mock 功能。 開發時，介面的 mock 資料統一放在 mock 目錄下，每個檔案內如下：

1. module.exports = {

2. // 介面地址

3. api: '/api/hello',

4. // 返回資料 參考http://expressjs.com/zh-cn/4x/api.html

5. response: function (req, res) {

6. res.send(`

7. <p>hello vue!</p>

8. `);

9. }

10. }

模組化

開發時可以使用 ES2015 module 語法，構建時每個檔案會編譯成 amd 模組。

元件化

整個應用通過 vue 元件的方式搭建起來，通過 vue-router 控制相應元件的展現，元件樹結構如下：

1. app.vue 根元件（整個應用只有一個）

2. ├──view1.vue 頁面級元件，放在 views 目錄裡面，有子元件時，可以建立子目錄

3. │ ├──component1.vue 功能元件，公用的放在 components 目錄，否則放在 views 子目錄

4. │ ├──component2.vue

5. │ └──component3.vue

6. ├──view2.vue

7. │ ├──component1.vue

8. │ └──component4.vue

9. └──view3.vue

10. ├──component5.vue

11. ……

單元測試

可以為每個元件編寫單元測試，放在 test/unit/specs 目錄下面, 單元測試用例的目錄結構建議和測試的檔案保持一致（相對於src），每個測試用例檔名以 .spec.js結尾。 執行 npm run unit 時會遍歷所有的 spec.js 檔案，產出測試報告在 test/unit/coverage 目錄。

聯調方式

前後端分離後，由於服務端和前端的開發環境處於2臺不同的機器上，前端的非同步請求需要代理到後端機器中。 聯調的時候，只需通過 proxy 引數執行 dev 指令碼即可，所有 mock 目錄下定義的介面將會轉發到 proxy 引數指定的機器：

1. # 192.168.36.90:8088 為後端機器的環境地址

2. npm run dev -- --proxy=192.168.36.90:8088

執行專案：

• 1.cd project-name

• 2.npm install

• 3.npm run dev

• 4.在瀏覽器輸入localhost:8080

• main.js 是我們的入口檔案，主要作用是初始化vue例項並使用需要的外掛

import Vue from 'vue'
import App from './App'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

• App.vue是我們的主元件，所有頁面都是在App.vue下進行切換的。其實你也可以理解為所有的路由也是App.vue的子元件。所以我將router標示為App.vue的子元件。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

<script>
import Hello from './components/Hello'

export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>