項目包含：
- 基礎庫:
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：項目的說明文件。
目錄結構
-
├── README.md 項目介紹 -
├── index.html 入口頁面 -
├── build 構建腳本目錄 -
│ ├── build-server.js 運行本地構建服務器，可以訪問構建後的頁面 -
│ ├── build.js 生產環境構建腳本 -
│ ├── dev-client.js 開發服務器熱重載腳本，主要用來實現開發階段的頁面自動刷新 -
│ ├── dev-server.js 運行本地開發服務器 -
│ ├── utils.js 構建相關工具方法 -
│ ├── webpack.base.conf.js wabpack基礎配置 -
│ ├── webpack.dev.conf.js wabpack開發環境配置 -
│ └── webpack.prod.conf.js wabpack生產環境配置 -
├── config 項目配置 -
│ ├── dev.env.js 開發環境變量 -
│ ├── index.js 項目配置文件 -
│ ├── prod.env.js 生產環境變量 -
│ └── test.env.js 測試環境變量 -
├── mock mock數據目錄 -
│ └── hello.js -
├── package.json npm包配置文件，裏面定義了項目的npm腳本，依賴包等信息 -
├── src 源碼目錄 -
│ ├── main.js 入口js文件 -
│ ├── app.vue 根組件 -
│ ├── components 公共組件目錄 -
│ │ └── title.vue -
│ ├── assets 資源目錄，這裏的資源會被wabpack構建 -
│ │ └── images -
│ │ └── logo.png -
│ ├── routes 前端路由 -
│ │ └── index.js -
│ ├── store 應用級數據（state） -
│ │ └── index.js -
│ └── views 頁面目錄 -
│ ├── hello.vue -
│ └── notfound.vue -
├── static 純靜態資源，不會被wabpack構建。 -
└── test 測試文件目錄（unit&e2e） -
└── unit 單元測試 -
├── index.js 入口腳本 -
├── karma.conf.js karma配置文件 -
└── specs 單測case目錄 -
└── Hello.spec.js
環境安裝
本項目依賴 node.js， 使用前先安裝 node.js 和 cnpm（顯著提升依賴包的下載速度）。
-
自行下載並安裝 node.js： https://nodejs.org/en/download/
-
然後安裝 cnpm 命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org
快速開始
-
git clone https://github.com/hanan198501/vue-spa-template.git -
cd vue-spa-template -
cnpm install -
npm run dev
命令列表：
-
#開啓本地開發服務器，監控項目文件的變化，實時構建並自動刷新瀏覽器，瀏覽器訪問 http://localhost:8081 -
npm run dev -
#使用生產環境配置構建項目，構建好的文件會輸出到 "dist" 目錄， -
npm run build -
#運行構建服務器，可以查看構建的頁面 -
npm run build-server -
#運行單元測試 -
npm run unit
前後端分離
項目基於 spa 方式實現前後端分離，服務器通過 nginx 區分前端頁面和後端接口請求，分發到不同服務。前端物理上只有一個入口頁面, 路由由前端控制（基於vue-router），根據不同的 url 加載相應數據和組件進行渲染。
接口 mock
前後端分離後，開發前需要和後端同學定義好接口信息（請求地址，參數，返回信息等），前端通過 mock 的方式，即可開始編碼，無需等待後端接口 ready。 項目的本地開發服務器是基於 express 搭建的，通過 express 的中間件機制，我們已經在 dev-server 中添加了接口 mock 功能。 開發時，接口的 mock 數據統一放在 mock 目錄下，每個文件內如下：
-
module.exports = { -
// 接口地址 -
api: '/api/hello', -
// 返回數據 參考http://expressjs.com/zh-cn/4x/api.html -
response: function (req, res) { -
res.send(` -
<p>hello vue!</p> -
`); -
} -
}
模塊化
開發時可以使用 ES2015 module 語法，構建時每個文件會編譯成 amd 模塊。
組件化
整個應用通過 vue 組件的方式搭建起來，通過 vue-router 控制相應組件的展現，組件樹結構如下：
-
app.vue 根組件（整個應用只有一個） -
├──view1.vue 頁面級組件，放在 views 目錄裏面，有子組件時，可以建立子目錄 -
│ ├──component1.vue 功能組件，公用的放在 components 目錄，否則放在 views 子目錄 -
│ ├──component2.vue -
│ └──component3.vue -
├──view2.vue -
│ ├──component1.vue -
│ └──component4.vue -
└──view3.vue -
├──component5.vue -
……
單元測試
可以爲每個組件編寫單元測試，放在 test/unit/specs 目錄下面, 單元測試用例的目錄結構建議和測試的文件保持一致（相對於src），每個測試用例文件名以 .spec.js結尾。 執行 npm run unit 時會遍歷所有的 spec.js 文件，產出測試報告在 test/unit/coverage 目錄。
聯調方式
前後端分離後，由於服務端和前端的開發環境處於2臺不同的機器上，前端的異步請求需要代理到後端機器中。 聯調的時候，只需通過 proxy 參數運行 dev 腳本即可，所有 mock 目錄下定義的接口將會轉發到 proxy 參數指定的機器：
-
# 192.168.36.90:8088 爲後端機器的環境地址 -
npm run dev -- --proxy=192.168.36.90:8088 -
這樣，如果 mock 目錄下有定義了接口 /api/hello ，將會轉發到 http://192.168.36.90/:8088/api/hello
運行項目：
-
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>