關(guān)注?Vue社區(qū)，回復(fù)“加群”

加入我們一起學(xué)習(xí)，天天進步

praise

juejin.im/post/5e612534e51d4527017971a2

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

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

項目結(jié)構(gòu)

本項目已經(jīng)為你生成了一個完整的開發(fā)框架，下面是整個項目的目錄結(jié)構(gòu)。

# git log

安裝

# 克隆項目

TIP

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

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

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

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

接下來你可以修改代碼進行業(yè)務(wù)開發(fā)了，本項目內(nèi)建了典型業(yè)務(wù)模板、模擬數(shù)據(jù)、狀態(tài)管理、國際化、全局路由等等各種實用的功能來輔助開發(fā)

常用命令

# 項目打包

分層架構(gòu)

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

• 產(chǎn)品需要多人協(xié)作時，每個人的代碼風(fēng)格和對業(yè)務(wù)的理解不同，導(dǎo)致業(yè)務(wù)邏輯分布雜亂無章

• 對產(chǎn)品的理解停留在頁面驅(qū)動層面，導(dǎo)致實現(xiàn)的技術(shù)模型與實際業(yè)務(wù)模型出入較大，當(dāng)業(yè)務(wù)需求變動時，技術(shù)模型很容易被摧毀

• ...

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

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

Services 層

Services 層是用來對底層技術(shù)進行操作的，例如封裝?AJAX?請求,操作瀏覽器?Cookie、LocaStorage、IndexedDB，操作?Native?提供的能力(如調(diào)用攝像頭等)，以及建立?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 是領(lǐng)域驅(qū)動設(shè)計的核心概念，它是領(lǐng)域服務(wù)的載體，它定義了業(yè)務(wù)中某個個體的屬性和方法。區(qū)分一個對象是否是實體，主要是看他是否有唯一的標(biāo)志符(例如 id)

通過上面的代碼可以看到，這里主要是以實體本身的屬性以及派生屬性為主，當(dāng)然實體本身也可以具有方法，用于實現(xiàn)屬于實體自身的業(yè)務(wù)邏輯。

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

Interactors 層

Interactors 層是負責(zé)處理業(yè)務(wù)邏輯的層，主要是由業(yè)務(wù)用例組成

import { Request }

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

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

當(dāng)然這種分層架構(gòu)并不是銀彈，其主要適用的場景是：實體關(guān)系復(fù)雜，而交互相對模式化，例如企業(yè)軟件領(lǐng)域。相反實體關(guān)系簡單而交互復(fù)雜多變就不適合這種分層架構(gòu)了。

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

布局

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

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

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

樣式

CSS Modules

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

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

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

/* 編譯前 */

只要加上?style scoped?這樣 css 就只會作用在當(dāng)前組件內(nèi)了。

TIP

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

目錄結(jié)構(gòu)

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

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

一次完整的與服務(wù)器端交互

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

UI 組件交互操作

調(diào)用統(tǒng)一管理的 api service 請求函數(shù)

使用封裝的 request.js 發(fā)送請求

獲取服務(wù)端返回

更新 data

request.js

其中，@/src/utils/request.js?是基于 Server 目錄的 http 的二次封裝，便于統(tǒng)一處理 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
}
...
}

例子

定義接口地址統(tǒng)一管理?src/constants/api/test.js

export

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

async getTest() {

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

async

TIP

目錄結(jié)構(gòu)不要糾結(jié)，個人習(xí)慣而定

頁面使用?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)
}
}

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

生成所需文件

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。