在這一部分中，借助 Vue 的 method 、onkeydown 和 computed 實(shí)現(xiàn)了頁(yè)面基本邏輯的構(gòu)建。并借助 Vuetify 的一些基礎(chǔ)組件來(lái)構(gòu)建頁(yè)面。

工作量分析

在我們進(jìn)行這部分開(kāi)發(fā)的時(shí)候，接下來(lái)我們需要進(jìn)行相應(yīng)的功能安排和分類。

簡(jiǎn)單看來(lái)，我需要開(kāi)發(fā) 3 個(gè)頁(yè)面：

1. 首頁(yè)：首頁(yè)負(fù)責(zé)用戶默認(rèn)訪問(wèn)。
2. 列表頁(yè)：列表頁(yè)面則是在搜索過(guò)程中，如果有多個(gè)結(jié)果，則進(jìn)入到列表頁(yè)面。如果有單個(gè)結(jié)果，則應(yīng)該進(jìn)入到詳情頁(yè)面。
3. 結(jié)果頁(yè)：結(jié)果頁(yè)負(fù)責(zé)顯示命令的具體的翻譯結(jié)果。

根據(jù)實(shí)際的工作拆分組件的化，我需要有一個(gè) Layout 組件來(lái)負(fù)責(zé)整體的頁(yè)面的環(huán)境渲染。但是，考慮到組件的復(fù)用，于是決定將首頁(yè)的 Title 進(jìn)行優(yōu)化，使首頁(yè)和詳情頁(yè)保持一致。

在新版的布局情況下，我就可以將頂部的的 title 和底部的 Link 放在最外側(cè)的組件中。

創(chuàng)建 Router & Page

在思考情況后，接下來(lái)我們來(lái)創(chuàng)建 Router 和 Page。首先，刪除 views 下的 About.vue（因?yàn)檫@個(gè)頁(yè)面我們不需要）。然后創(chuàng)建 List.vue 和 Result.vue ，用作后續(xù)的開(kāi)發(fā)準(zhǔn)備。

創(chuàng)建完成后，修改 router/index.js 中的 routes 部分：

const routes = [??{????path: '/',????name: 'home',????component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')??},??{????path: '/list/:cmd',????name: 'list',????component: () => import(/* webpackChunkName: "list" */ '../views/List.vue')??},??{????path: '/cmd/:cmd',????name: 'command',????component: () => import(/* webpackChunkName: "cmd" */ '../views/Result.vue')??}]

完成定義后，我們就可以通過(guò)形如 https://tldr.linux.cn/list/ls 和 https://tldr.linux.cn/cmd/ls 這樣的方式來(lái)訪問(wèn)具體的命令了。

定義頁(yè)面

接下來(lái)需要編寫 Home、List 和 Result 這三個(gè)頁(yè)面。由于這三個(gè)頁(yè)面在內(nèi)容方面沒(méi)有太多的可以借鑒的點(diǎn)，所以我們更多關(guān)注于使用頁(yè)面中 <script> 的部分。

<template>??<div class="home">????????<v-text-field????????v-model="cmd"????????@keydown="onKeyDown"????????autofocus????????></v-text-field>??????????</div></template><script>export default {??name: 'home',??data:function(){????return {??????cmd:""????}??},??methods:{????onKeyDown: function(e)??{???? ????}??},??computed:{????isLoaded:function(){????????return !this.loaded????}??}}</script>

上述代碼是我在三個(gè)頁(yè)面幾乎都會(huì)使用到的結(jié)構(gòu)，刪除其中的一些無(wú)用的代碼以后，基本上在每個(gè)頁(yè)面都可以看到。這里我重點(diǎn)說(shuō)一下其中的一些比較特殊的用法。

首先第一個(gè)是在 v-text-field 上加入的 @keydown="onKeyDown" 這個(gè)綁定，這個(gè)綁定將會(huì)幫助實(shí)現(xiàn)用戶點(diǎn)擊回車以后，自動(dòng)觸發(fā)事件。這樣在用戶輸入完命令后，按下回車就自動(dòng)執(zhí)行后續(xù)的操作，而不需要再移動(dòng)鼠標(biāo)指針去點(diǎn)擊按鈕啟動(dòng)搜索。

其次，在 v-text-field 上加入了autofocus ，來(lái)實(shí)現(xiàn)進(jìn)入頁(yè)面后，自動(dòng)為輸入框加入focus，從而實(shí)現(xiàn)頁(yè)面加載完成后，用戶就可以輸入命令。

這樣的一些配置，可以讓用戶的體驗(yàn)做到最好。

除此之外，我還用到了 computed ，來(lái)做數(shù)據(jù)調(diào)整，確保我可以控制內(nèi)容。

一些小的特性的點(diǎn)

使用骨架圖來(lái)優(yōu)化體驗(yàn)

由于我們的應(yīng)用在列表頁(yè)面和詳情頁(yè)面存在數(shù)據(jù)的查詢時(shí)間，為了讓應(yīng)用在加載的時(shí)候，不會(huì)因?yàn)榧虞d中而退出頁(yè)面，我加入了 v-skeleton-loader 組件，這樣用戶在數(shù)據(jù)查詢的時(shí)候，看骨架圖來(lái)緩解用戶的焦慮。

在組件層面，我配置了 v-if 來(lái)做顯示的控制，并將 type 設(shè)置為 card,article,card,article 來(lái)實(shí)現(xiàn)多樣化的組件加載支持。

<v-skeleton-loader????v-if="isLoaded"????type="card,article,card,article"????min-height="800"????></v-skeleton-loader>

總結(jié)

在這一部分中，借助 Vue 的 method 、onkeydown 和 computed 實(shí)現(xiàn)了頁(yè)面基本邏輯的構(gòu)建。并借助 Vuetify 的一些基礎(chǔ)組件來(lái)構(gòu)建頁(yè)面。

在這一部分，我想告訴大家的更多是在 UI 的部分，我們?cè)谧龅臅r(shí)候不僅僅需要考慮的是界面，更多還需要考慮在 UX 側(cè)體驗(yàn)的優(yōu)化，組件庫(kù)提供給我們的配置項(xiàng)目，可以優(yōu)化產(chǎn)品體驗(yàn)。

點(diǎn)擊“了解更多”可訪問(wèn)文內(nèi)鏈接