基于云的Web应用开发（二）：界面UI开发

体验Linux小程序小程序PC端访问https://tldr.linux.cn/体验工作量分析接下来我们需要对相应的功能进行整理分类。简单来说，我需要开发3个页面：首页：首页负责用户的默认访问。列表页：列表页是在搜索过程中，如果有多个结果，就会进入列表页。如果只有一个结果，则应转到详细信息页面。结果页面：结果页面负责显示命令的具体翻译结果。根据拆分组件的实际工作，我需要一个Layout组件来负责整体的页面环境渲染。但是考虑到组件的复用，决定优化首页的Title，让首页和详情页保持一致。对于新版本的布局，我可以将标题放在顶部，将链接放在最外层组件的底部。创建Router&Page想清楚了情况，接下来我们来创建Router和Page。首先，删除视图页面的About.vue（因为这个页面不需要它）。然后创建List.vue和Result.vue，为后续开发做准备。创建后修改router/index.js中的routes部分constroutes=[{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的形式访问具体命令了。这里需要注意的是，我提前打开了HistoryMode定义页面，然后需要写Home、List和Result这三个页面。由于这三个页面在内容上没有太多值得借鉴的地方，所以我们更侧重于使用页面的Script部分。上面的代码是我在三个页面上几乎都会用到的结构。删除一些无用的代码后，基本上每个页面都能看到。这里我将重点介绍一些比较特殊的用法。首先，第一个是添加到v-text-field的@keydown="onKeyDown"绑定。此绑定将有助于在用户单击Enter后自动触发事件。这样，用户输入命令后，回车后会自动执行后续操作，无需移动鼠标指针点击按钮开始搜索。其次，在v-text-field中添加autofocus，实现进入页面后自动将焦点添加到输入框，以便页面加载完成后，用户可以输入命令。像这样的一些配置可以使用户体验最好。另外，我还用了computed，来做数据调整，保证我能把控内容。一些小的特征点使用骨架图来优化体验。由于我们的应用在列表页和详情页都有数据查询的时间，为了防止应用在加载的时候因为加载而退出页面，我添加了v-skeleton-loader组件，这样当用户查询数据的时候，他们可以看到骨架图来解除用户的焦虑。在组件层面，我配置了v-if来控制显示，并将type设置为card,article,card,article来实现多样化的组件加载支持。总结这部分，借助Vue的method、onkeydown和computed实现了页面基本逻辑的构建。并使用Vuetify的一些基本组件来构建页面。在这一部分，我想告诉你更多关于UI的部分。我们在做的时候，不仅要考虑界面，还要考虑UX端体验的优化，以及组件库提供的配置项，可以优化产品体验。