基於雲開發開發 Web 應用（二）：界面 UI 開發

體驗 Linux 小程序

小程序端

PC 端

訪問 https://tldr.linux.cn/ 體驗

工做量分析

在咱們進行這部分開發的時候，接下來咱們須要進行相應的功能安排和分類。

簡單看來，我須要開發 3 個頁面：

1. 首頁：首頁負責用戶默認訪問。
2. 列表頁：列表頁面則是在搜索過程當中，若是有多個結果，則進入到列表頁面。若是有單個結果，則應該進入到詳情頁面。
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 側體驗的優化，組件庫提供給咱們的配置項目，能夠優化產品體驗。