關注?Vue社區，回復“加群”

加入我們一起學習，天天進步

praise

juejin.im/post/5e612534e51d4527017971a2

模板基于 vue-cli4 和 Vant-ui 搭建，進行大型 H5 項目開發最佳實踐方案，讓我們來一探究竟

模板地址?(github.com/push-over/vue-h5-template)動動你可愛的小手點亮一顆?star

項目結構

本項目已經為你生成了一個完整的開發框架，下面是整個項目的目錄結構。

# git log

安裝

# 克隆項目

TIP

強烈建議不要用直接使用 cnpm 安裝，會有各種詭異的 bug，可以通過重新指定 registry 來解決 npm 安裝速度慢的問題。若還是不行，可使用 yarn 替代?npm。

Windows 用戶若安裝不成功，很大概率是node-sass安裝失敗，解決方案(https://github.com/PanJiaChen/vue-element-admin/issues/24)。

另外因為?node-sass?是依賴?python環境的，如果你之前沒有安裝和配置過的話，需要自行查看一下相關安裝教程。

啟動完成后會自動打開瀏覽器訪問 [http://localhost:9000， 你看到下面的頁面就代表操作成功了。

接下來你可以修改代碼進行業務開發了，本項目內建了典型業務模板、模擬數據、狀態管理、國際化、全局路由等等各種實用的功能來輔助開發

常用命令

# 項目打包

分層架構

目前前端的一個開發趨勢是以搭建單頁應用 (SPA) 為主的。當應用體系比較大，或者你的應用業務邏輯足夠復雜的時候，會遇到各種各樣的問題，我們隨便提兩點：

• 產品需要多人協作時，每個人的代碼風格和對業務的理解不同，導致業務邏輯分布雜亂無章

• 對產品的理解停留在頁面驅動層面，導致實現的技術模型與實際業務模型出入較大，當業務需求變動時，技術模型很容易被摧毀

• ...

針對上面所遇到的問題，我們以下面這張架構圖做講解：

其中?視圖層/View?是大家接觸最多的，想必大家都很了解，就不在這里介紹了，重點介紹其他幾個層的含義：

Services 層

Services 層是用來對底層技術進行操作的，例如封裝?AJAX?請求,操作瀏覽器?Cookie、LocaStorage、IndexedDB，操作?Native?提供的能力(如調用攝像頭等)，以及建立?Websocket?與后端進行交互等。

Axios 封裝

.....

export defaultasyncfunction(options) {
const { url } = options
const requestOptions = Object.assign({}, options)

try {
const { data, data: { errno, errmsg }} = await instance.request(requestOptions)
if (errno) {
errorReport(url, errmsg, requestOptions, data)
thrownewError(errmsg)
}
return data
} catch (err) {
errorReport(url, err, requestOptions)
throw err
}
}

IndexedDB

...

export class DBRequest {
instance

static getInstance() {
if (!this.instance) {
this.instance = new DBRequest()
}
returnthis.instance
}
async create(options = {}) {
const { name, data } = options
const db = await indexDB(name)
returnawait db.add(name, data)
}
...
}

.......

Entities 層

實體 Entity 是領域驅動設計的核心概念，它是領域服務的載體，它定義了業務中某個個體的屬性和方法。區分一個對象是否是實體，主要是看他是否有唯一的標志符(例如 id)

通過上面的代碼可以看到，這里主要是以實體本身的屬性以及派生屬性為主，當然實體本身也可以具有方法，用于實現屬于實體自身的業務邏輯。

并不是所有的實體都應該按上面那樣封裝成一個類，如果某個實體本身業務邏輯很簡單，就沒有必要進行封裝，例如本模板中的?Test?只是做個演示。

Interactors 層

Interactors 層是負責處理業務邏輯的層，主要是由業務用例組成

import { Request }

通過上面的代碼可以看到，Sevices 層提供的類的實例主要是通過 Interactors 層的類的構造函數獲取到，這樣就可以達到兩層之間解耦，實現快速切換 service 的目的了，當然這個和依賴注入 DI 還是有些差距的，不過已經滿足了我們的需求。

另外 Interactors 層還可以獲取 Entities 層提供的實體類，將實體類提供的與實體強相關的業務邏輯和 Interactors 層的業務邏輯融合到一起提供給 View 層，例如：

當然這種分層架構并不是銀彈，其主要適用的場景是：實體關系復雜，而交互相對模式化，例如企業軟件領域。相反實體關系簡單而交互復雜多變就不適合這種分層架構了。

然后需要明確的是，架構和項目文件結構并不是等同的，文件結構是你從視覺上分離應用程序各部分的方式，而架構是從概念上分離應用程序的方式。你可以在很好地保持相同架構的同時，選擇不同的文件結構方式。沒有完美的文件結構，因此請根據項目的不同選擇適合你的文件結構。

布局

頁面整體布局是一個產品最外層的框架結構, 這里使用了 vue-router 路由嵌套, 所以一般情況下，你增加或者修改頁面只會影響?app-main這個主體區域。其它配置在?layout?中的內容如：底部導航都是不會隨著你主體頁面變化而變化的。

/foo /bar
+------------------+ +-----------------+
| layout | | layout |
| +--------------+ | | +-------------+ |
| | foo.vue | | +------------> | | bar.vue | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+

這里在?app-main?外部包了一層?keep-alive?主要是為了緩存 的，如不需要可自行去除。

樣式

CSS Modules

在樣式開發過程中，有兩個問題比較突出：

• 全局污染 —— CSS 文件中的選擇器是全局生效的，不同文件中的同名選擇器，根據 build 后生成文件中的先后順序，后面的樣式會將前面的覆蓋；
• 選擇器復雜 —— 為了避免上面的問題，我們在編寫樣式的時候不得不小心翼翼，類名里會帶上限制范圍的標示，變得越來越長，多人開發時還很容易導致命名風格混亂，一個元素上使用的選擇器個數也可能越來越多，最終導致難以維護。

好在 vue 為我們提供了 scoped 可以很方便的解決上述問題。它顧名思義給 css 加了一個域的概念。

/* 編譯前 */

只要加上?style scoped?這樣 css 就只會作用在當前組件內了。

TIP

使用 scoped 后，父組件的樣式將不會滲透到子組件中。不過一個子組件的根節點會同時受其父組件的 scoped CSS 和子組件的 scoped CSS 的影響。這樣設計是為了讓父組件可以從布局的角度出發，調整其子組件根元素的樣式。

目錄結構

vue-h5-template?所有全局樣式都在?@/src/styles?目錄下設置

├── styles
│ ├── _animation # 全局動畫
│ ├── index.scss # 全局通用樣式
│ ├── _mixin.scss # 全局mixin
│ ├── _transition.scss # 過渡效果
│ └── _variables.scss # 全局變量

一次完整的與服務器端交互

在?vue-h5-template?中，一個完整的前端 UI 交互到服務端處理流程是這樣的：

UI 組件交互操作

調用統一管理的 api service 請求函數

使用封裝的 request.js 發送請求

獲取服務端返回

更新 data

request.js

其中，@/src/utils/request.js?是基于 Server 目錄的 http 的二次封裝，便于統一處理 POST，GET 等請求方式。具體可以參看項目代碼。

...
export class Request {
instance

static getInstance() {
if (!this.instance) {
this.instance = new Request()
}
returnthis.instance
}

async post(options = {}) {
const { data } = await service({
method: 'post',
...options
})
return data
}
...
}

例子

定義接口地址統一管理?src/constants/api/test.js

export

請求方法?src/core/interactors/test-interactor.js

async getTest() {

請求方式?src/utils/request.js

async

TIP

目錄結構不要糾結，個人習慣而定

頁面使用?src/pages/test/index.vue

# 生命周期
async created() {
if (this.id) {
awaitthis.handleGetTest()
}
}

# 請求
async handleGetTest() {
try {
const test = await testInteractor.getTest(this.id)
this.addressInfo = Object.assign({}, test)
} catch (error) {
console.log(error)
}
}

可能大家會覺得很繁瑣，這么多文件容易搞混，重復編寫代碼等等，不要著急，本模板配置了自動生成文件，上述除了視圖/View 層這塊需要你手動去編寫代碼，其他的我們都會去一鍵生成，接下來我們就來講講使用方法。

生成所需文件

在開發過程中,無論我們添加頁面也好還是添加組件等等。都需要不停地新建?.vue文件(或者其他框架或者 html/js/css 文件)

以 Vue 項目為例, 我們新建一個 component 或 view 的時候，需要新建一個.vue 文件，然后寫?、

總結

以上是生活随笔為你收集整理的vue lang_推荐一个基于Vue 的 H5 快速开发模板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。