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檔案

│ ├── 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

環境安裝

然後安裝 cnpm 命令：

npm install -g cnpm --registry=

快速開始

git clone

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』,

// 返回資料參考

response: function (req, res) {

res.send(`

hello vue!

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

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

單元測試

可以為每個元件編寫單元測試，放在 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 ，將會**到

vue專案目錄結構詳解

vue專案目錄結構詳解

vue專案目錄結構詳解

vue專案目錄結構詳解

相關推薦