工作量分析
在我們進行這部分開發的時候,接下來我們需要進行相應的功能安排和分類。
簡單看來,我需要開發 3 個頁面:
- 首頁:首頁負責使用者預設通路。
- 清單頁:清單頁面則是在搜尋過程中,如果有多個結果,則進入到清單頁面。如果有單個結果,則應該進入到詳情頁面。
- 結果頁:結果頁負責顯示指令的具體的翻譯結果。
根據實際的工作拆分元件的化,我需要有一個 Layout 元件來負責整體的頁面的環境渲染。但是,考慮到元件的複用,于是決定将首頁的 Title 進行優化,使首頁和詳情頁保持一緻。
在新版的布局情況下,我就可以将頂部的的 title 和底部的 Link 放在最外側的元件中。
建立 Router & Page
在思考情況後,接下來我們來建立 Router 和 Page。首先,删除 views 頁面的 About.vue(因為這個頁面我們不需要)。然後建立 List.vue 和 Result.vue ,用作後續的開發準備。
建立完成後,修改
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')
}
]
複制
完成定義後,我們就可以通過形如
https://tldr.linux.cn/list/ls
和
https://tldr.linux.cn/cmd/ls
這樣的方式來通路具體的指令了。
這裡需要注意,我提前開啟了 History Mode
定義頁面
接下來需要編寫 Home、List 和 Result 這三個頁面。由于這三個頁面在内容方面沒有太多的可以借鑒的點,是以我們更多關注于使用頁面中 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>
複制
上述代碼是我在三個頁面幾乎都會使用到的結構,删除其中的一些無用的代碼以後,基本上在每個頁面都可以看到。這裡我重點說一下其中的一些比較特殊的用法。
首先第一個是在
v-text-field
上加入的
@keydown="onKeyDown"
這個綁定,這個綁定将會幫助實作使用者點選回車以後,自動觸發事件。這樣在使用者輸入完指令後,按下回車就自動執行後續的操作,而不需要再移動滑鼠指針去點選按鈕啟動搜尋。
其次,在
v-text-field
上加入了
autofocus
,來實作進入頁面後,自動為輸入框加入
focus
,進而實作頁面加載完成後,使用者就可以輸入指令。
這樣的一些配置,可以讓使用者的體驗做到最好。
除此之外,我還用到了
computed
,來做資料調整,確定我可以控制内容。
一些小的特性的點
使用骨架圖來優化體驗
由于我們的應用在清單頁面和詳情頁面存在資料的查詢時間,為了讓應用在加載的時候,不會因為加載中而退出頁面,我加入了 v-skeleton-loader 元件,這樣使用者在資料查詢的時候,看骨架圖來緩解使用者的焦慮。
在元件層面,我配置了 v-if 來做顯示的控制,并将 type 設定為
card,article,card,article
來實作多樣化的元件加載支援。
<v-skeleton-loader
v-if="isLoaded"
type="card,article,card,article"
min-height="800"
></v-skeleton-loader>
複制
總結
在這一部分中,借助 Vue 的 method 、onkeydown 和 computed 實作了頁面基本邏輯的建構。并借助 Vuetify 的一些基礎元件來建構頁面。
在這一部分,我想告訴大家的更多是在 UI 的部分,我們在做的時候不僅僅需要考慮的是界面,更多還需要考慮在 UX 側體驗的優化,元件庫提供給我們的配置項目,可以優化産品體驗。