這篇文章主要介紹了vue中文件目錄結(jié)構(gòu)的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
南崗網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)建站于2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。
項(xiàng)目簡(jiǎn)介
基于 vue.js 的前端開(kāi)發(fā)環(huán)境，用于前后端分離后的單頁(yè)應(yīng)用開(kāi)發(fā)，可以在開(kāi)發(fā)時(shí)使用 ES Next、scss 等最新語(yǔ)言特性。項(xiàng)目包含：
基礎(chǔ)庫(kù): vue.js、vue-router、vuex、whatwg-fetch
編譯/打包工具：webpack、babel、node-sass
單元測(cè)試工具：karma、mocha、sinon-chai
本地服務(wù)器：express
目錄結(jié)構(gòu)
├── README.md 項(xiàng)目介紹 ├── index.html 入口頁(yè)面 ├── build 構(gòu)建腳本目錄 │ ├── build-server.js 運(yùn)行本地構(gòu)建服務(wù)器，可以訪問(wèn)構(gòu)建后的頁(yè)面 │ ├── build.js 生產(chǎn)環(huán)境構(gòu)建腳本 │ ├── dev-client.js 開(kāi)發(fā)服務(wù)器熱重載腳本，主要用來(lái)實(shí)現(xiàn)開(kāi)發(fā)階段的頁(yè)面自動(dòng)刷新 │ ├── dev-server.js 運(yùn)行本地開(kāi)發(fā)服務(wù)器 │ ├── utils.js 構(gòu)建相關(guān)工具方法 │ ├── webpack.base.conf.js wabpack基礎(chǔ)配置 │ ├── webpack.dev.conf.js wabpack開(kāi)發(fā)環(huán)境配置 │ └── webpack.prod.conf.js wabpack生產(chǎn)環(huán)境配置 ├── config 項(xiàng)目配置 │ ├── dev.env.js 開(kāi)發(fā)環(huán)境變量 │ ├── index.js 項(xiàng)目配置文件 │ ├── prod.env.js 生產(chǎn)環(huán)境變量 │ └── test.env.js 測(cè)試環(huán)境變量 ├── mock mock數(shù)據(jù)目錄 │ └── hello.js ├── package.json npm包配置文件，里面定義了項(xiàng)目的npm腳本，依賴包等信息 ├── src 源碼目錄 │ ├── main.js 入口js文件 │ ├── app.vue 根組件 │ ├── components 公共組件目錄 │ │ └── title.vue │ ├── assets 資源目錄，這里的資源會(huì)被wabpack構(gòu)建 │ │ └── images │ │ └── logo.png │ ├── routes 前端路由 │ │ └── index.js │ ├── store 應(yīng)用級(jí)數(shù)據(jù)（state） │ │ └── index.js │ └── views 頁(yè)面目錄 │ ├── hello.vue │ └── notfound.vue ├── static 純靜態(tài)資源，不會(huì)被wabpack構(gòu)建。 └── test 測(cè)試文件目錄（unit&e2e） └── unit 單元測(cè)試 ├── index.js 入口腳本 ├── karma.conf.js karma配置文件 └── specs 單測(cè)case目錄 └── Hello.spec.js
環(huán)境安裝
本項(xiàng)目依賴 node.js， 使用前先安裝 node.js 和 cnpm（顯著提升依賴包的下載速度）。
自行下載并安裝 node.js： https://nodejs.org/en/download/
然后安裝 cnpm 命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org
快速開(kāi)始
git clone https://github.com/hanan198501/vue-spa-template.git cd vue-spa-template cnpm install npm run dev
命令列表：
#開(kāi)啟本地開(kāi)發(fā)服務(wù)器，監(jiān)控項(xiàng)目文件的變化，實(shí)時(shí)構(gòu)建并自動(dòng)刷新瀏覽器，瀏覽器訪問(wèn) http://localhost:8081 npm run dev #使用生產(chǎn)環(huán)境配置構(gòu)建項(xiàng)目，構(gòu)建好的文件會(huì)輸出到 "dist" 目錄， npm run build #運(yùn)行構(gòu)建服務(wù)器，可以查看構(gòu)建的頁(yè)面 npm run build-server #運(yùn)行單元測(cè)試 npm run unit
前后端分離
項(xiàng)目基于 spa 方式實(shí)現(xiàn)前后端分離，服務(wù)器通過(guò) nginx 區(qū)分前端頁(yè)面和后端接口請(qǐng)求，分發(fā)到不同服務(wù)。前端物理上只有一個(gè)入口頁(yè)面, 路由由前端控制（基于vue-router），根據(jù)不同的 url 加載相應(yīng)數(shù)據(jù)和組件進(jìn)行渲染。
接口 mock
前后端分離后，開(kāi)發(fā)前需要和后端同學(xué)定義好接口信息（請(qǐng)求地址，參數(shù)，返回信息等），前端通過(guò) mock 的方式，即可開(kāi)始編碼，無(wú)需等待后端接口 ready。 項(xiàng)目的本地開(kāi)發(fā)服務(wù)器是基于 express 搭建的，通過(guò) express 的中間件機(jī)制，我們已經(jīng)在 dev-server 中添加了接口 mock 功能。 開(kāi)發(fā)時(shí)，接口的 mock 數(shù)據(jù)統(tǒng)一放在 mock 目錄下，每個(gè)文件內(nèi)如下：
重慶分公司
重慶分公司
module.exports = {
// 接口地址
api: '/api/hello',
// 返回?cái)?shù)據(jù) 參考http://expressjs.com/zh-cn/4x/api.html
response: function (req, res) {
res.send(`
hello vue!
`);
}
}模塊化
開(kāi)發(fā)時(shí)可以使用 ES2015 module 語(yǔ)法，構(gòu)建時(shí)每個(gè)文件會(huì)編譯成 amd 模塊。
組件化
整個(gè)應(yīng)用通過(guò) vue 組件的方式搭建起來(lái)，通過(guò) vue-router 控制相應(yīng)組件的展現(xiàn)，組件樹(shù)結(jié)構(gòu)如下：
app.vue 根組件（整個(gè)應(yīng)用只有一個(gè)） ├──view1.vue 頁(yè)面級(jí)組件，放在 views 目錄里面，有子組件時(shí)，可以建立子目錄 │ ├──component1.vue 功能組件，公用的放在 components 目錄，否則放在 views 子目錄 │ ├──component2.vue │ └──component3.vue ├──view2.vue │ ├──component1.vue │ └──component4.vue └──view3.vue ├──component5.vue ……
單元測(cè)試
可以為每個(gè)組件編寫(xiě)單元測(cè)試，放在 test/unit/specs 目錄下面, 單元測(cè)試用例的目錄結(jié)構(gòu)建議和測(cè)試的文件保持一致（相對(duì)于src），每個(gè)測(cè)試用例文件名以 .spec.js結(jié)尾。 執(zhí)行 npm run unit 時(shí)會(huì)遍歷所有的 spec.js 文件，產(chǎn)出測(cè)試報(bào)告在 test/unit/coverage 目錄。
聯(lián)調(diào)方式
前后端分離后，由于服務(wù)端和前端的開(kāi)發(fā)環(huán)境處于2臺(tái)不同的機(jī)器上，前端的異步請(qǐng)求需要代理到后端機(jī)器中。 聯(lián)調(diào)的時(shí)候，只需通過(guò) proxy 參數(shù)運(yùn)行 dev 腳本即可，所有 mock 目錄下定義的接口將會(huì)轉(zhuǎn)發(fā)到 proxy 參數(shù)指定的機(jī)器：
# 172.16.36.90:8083 為后端機(jī)器的環(huán)境地址 npm run dev -- --proxy=172.16.36.90:8083
這樣，如果 mock 目錄下有定義了接口 /api/hello ，將會(huì)轉(zhuǎn)發(fā)到 http://172.16.36.90/:8083/api/hello
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue中文件目錄結(jié)構(gòu)的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
