vue中文件目錄結(jié)構(gòu)的示例分析

這篇文章主要介紹了vue中文件目錄結(jié)構(gòu)的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

項(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)目包含：

1. 基礎(chǔ)庫(kù): vue.js、vue-router、vuex、whatwg-fetch

2. 編譯/打包工具：webpack、babel、node-sass

3. 單元測(cè)試工具：karma、mocha、sinon-chai

4. 本地服務(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腳本，依賴(lài)包等信息
├── 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)目依賴(lài) node.js， 使用前先安裝 node.js 和 cnpm（顯著提升依賴(lài)包的下載速度）。

自行下載并安裝 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(`
   <p>hello vue!</p>
  `);
 }
}

模塊化

開(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í)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!