vue項目目錄結構詳解

項目簡介
基於 vue.js 的前端開發環境，用於先後端分離後的單頁應用開發，能夠在開發時使用 ES Next、scss 等最新語言特性。項目包含：

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

├── 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 參數指定的機器：

172.16.36.90:8083 爲後端機器的環境地址

npm run dev -- --proxy=172.16.36.90:8083
這樣，若是 mock 目錄下有定義了接口 /api/hello ，將會轉發到 http://172.16.36.90/:8083/api/hello