這篇文章主要介紹了vue中文件目錄結(jié)構(gòu)的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
項目簡介
基于 vue.js 的前端開發(fā)環(huán)境，用于前后端分離后的單頁應(yīng)用開發(fā)，可以在開發(fā)時使用 ES Next、scss 等最新語言特性。項目包含：
基礎(chǔ)庫: vue.js、vue-router、vuex、whatwg-fetch
編譯/打包工具：webpack、babel、node-sass
單元測試工具：karma、mocha、sinon-chai
本地服務(wù)器：express
目錄結(jié)構(gòu)
├── README.md 項目介紹 ├── index.html 入口頁面 ├── build 構(gòu)建腳本目錄 │ ├── build-server.js 運行本地構(gòu)建服務(wù)器，可以訪問構(gòu)建后的頁面 │ ├── build.js 生產(chǎn)環(huán)境構(gòu)建腳本 │ ├── dev-client.js 開發(fā)服務(wù)器熱重載腳本，主要用來實現(xiàn)開發(fā)階段的頁面自動刷新 │ ├── dev-server.js 運行本地開發(fā)服務(wù)器 │ ├── utils.js 構(gòu)建相關(guān)工具方法 │ ├── webpack.base.conf.js wabpack基礎(chǔ)配置 │ ├── webpack.dev.conf.js wabpack開發(fā)環(huán)境配置 │ └── webpack.prod.conf.js wabpack生產(chǎn)環(huán)境配置 ├── config 項目配置 │ ├── dev.env.js 開發(fā)環(huán)境變量 │ ├── index.js 項目配置文件 │ ├── prod.env.js 生產(chǎn)環(huán)境變量 │ └── test.env.js 測試環(huán)境變量 ├── mock mock數(shù)據(jù)目錄 │ └── hello.js ├── package.json npm包配置文件，里面定義了項目的npm腳本，依賴包等信息 ├── src 源碼目錄 │ ├── main.js 入口js文件 │ ├── app.vue 根組件 │ ├── components 公共組件目錄 │ │ └── title.vue │ ├── assets 資源目錄，這里的資源會被wabpack構(gòu)建 │ │ └── images │ │ └── logo.png │ ├── routes 前端路由 │ │ └── index.js │ ├── store 應(yīng)用級數(shù)據(jù)（state） │ │ └── index.js │ └── views 頁面目錄 │ ├── hello.vue │ └── notfound.vue ├── static 純靜態(tài)資源，不會被wabpack構(gòu)建。 └── test 測試文件目錄（unit&e2e） └── unit 單元測試 ├── index.js 入口腳本 ├── karma.conf.js karma配置文件 └── specs 單測case目錄 └── Hello.spec.js
環(huán)境安裝
本項目依賴 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
命令列表：
#開啟本地開發(fā)服務(wù)器，監(jiān)控項目文件的變化，實時構(gòu)建并自動刷新瀏覽器，瀏覽器訪問 http://localhost:8081 npm run dev #使用生產(chǎn)環(huán)境配置構(gòu)建項目，構(gòu)建好的文件會輸出到 "dist" 目錄， npm run build #運行構(gòu)建服務(wù)器，可以查看構(gòu)建的頁面 npm run build-server #運行單元測試 npm run unit
前后端分離
項目基于 spa 方式實現(xiàn)前后端分離，服務(wù)器通過 nginx 區(qū)分前端頁面和后端接口請求，分發(fā)到不同服務(wù)。前端物理上只有一個入口頁面, 路由由前端控制（基于vue-router），根據(jù)不同的 url 加載相應(yīng)數(shù)據(jù)和組件進行渲染。
接口 mock
前后端分離后，開發(fā)前需要和后端同學定義好接口信息（請求地址，參數(shù)，返回信息等），前端通過 mock 的方式，即可開始編碼，無需等待后端接口 ready。 項目的本地開發(fā)服務(wù)器是基于 express 搭建的，通過 express 的中間件機制，我們已經(jīng)在 dev-server 中添加了接口 mock 功能。 開發(fā)時，接口的 mock 數(shù)據(jù)統(tǒng)一放在 mock 目錄下，每個文件內(nèi)如下：
重慶分公司
重慶分公司
module.exports = {
// 接口地址
api: '/api/hello',
// 返回數(shù)據(jù) 參考http://expressjs.com/zh-cn/4x/api.html
response: function (req, res) {
res.send(`
hello vue!
`);
}
}模塊化
開發(fā)時可以使用 ES2015 module 語法，構(gòu)建時每個文件會編譯成 amd 模塊。
組件化
整個應(yīng)用通過 vue 組件的方式搭建起來，通過 vue-router 控制相應(yīng)組件的展現(xiàn)，組件樹結(jié)構(gòu)如下：
app.vue 根組件（整個應(yīng)用只有一個） ├──view1.vue 頁面級組件，放在 views 目錄里面，有子組件時，可以建立子目錄 │ ├──component1.vue 功能組件，公用的放在 components 目錄，否則放在 views 子目錄 │ ├──component2.vue │ └──component3.vue ├──view2.vue │ ├──component1.vue │ └──component4.vue └──view3.vue ├──component5.vue ……
單元測試
可以為每個組件編寫單元測試，放在 test/unit/specs 目錄下面, 單元測試用例的目錄結(jié)構(gòu)建議和測試的文件保持一致（相對于src），每個測試用例文件名以 .spec.js結(jié)尾。 執(zhí)行 npm run unit 時會遍歷所有的 spec.js 文件，產(chǎn)出測試報告在 test/unit/coverage 目錄。
聯(lián)調(diào)方式
前后端分離后，由于服務(wù)端和前端的開發(fā)環(huán)境處于2臺不同的機器上，前端的異步請求需要代理到后端機器中。 聯(lián)調(diào)的時候，只需通過 proxy 參數(shù)運行 dev 腳本即可，所有 mock 目錄下定義的接口將會轉(zhuǎn)發(fā)到 proxy 參數(shù)指定的機器：
# 172.16.36.90:8083 為后端機器的環(huán)境地址 npm run dev -- --proxy=172.16.36.90:8083
這樣，如果 mock 目錄下有定義了接口 /api/hello ，將會轉(zhuǎn)發(fā)到 http://172.16.36.90/:8083/api/hello
感謝你能夠認真閱讀完這篇文章，希望小編分享的“vue中文件目錄結(jié)構(gòu)的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
