跟我学 “Linux” 小程序 Web 版开发（二）：UI 开发

linux中国 2024-07-18 大树手机阅读

跟我学 “Linux” 小程序 Web 版开发（二）：UI 开发-1

工作量分析

在我们进行这部分开发的时候，接下来我们需要进行相应的功能安排和分类。

跟我学 “Linux” 小程序 Web 版开发（二）：UI 开发-2

简单看来，我需要开发 3 个页面：

首页：首页负责用户默认访问。

列表页：列表页面则是在搜索过程中，如果有多个结果，则进入到列表页面。如果有单个结果，则应该进入到详情页面。

结果页：结果页负责显示命令的具体的翻译结果。

根据实际的工作拆分组件的化，我需要有一个 Layout 组件来负责整体的页面的环境渲染。但是，考虑到组件的复用，于是决定将首页的 Title 进行优化，使首页和详情页保持一致。

跟我学 “Linux” 小程序 Web 版开发（二）：UI 开发-3

在新版的布局情况下，我就可以将顶部的的 title 和底部的 Link 放在最外侧的组件中。

创建 Router & Page

在思考情况后，接下来我们来创建 Router 和 Page。首先，删除 views 下的 About.vue（因为这个页面我们不需要）。然后创建 List.vue 和 Result.vue ，用作后续的开发准备。

跟我学 “Linux” 小程序 Web 版开发（二）：UI 开发-4

创建完成后，修改 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 这样的方式来访问具体的命令了。