本部分利用Vue的、和构建了页面的基本逻辑，并使用了一些基础组件来构建页面。

工作量分析

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

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

首页：首页负责用户的默认访问。 列表页：在搜索过程中，如果结果有多条，则进入列表页，如果结果只有一条，则进入详情页。 结果页：结果页负责显示该命令的详细翻译结果。

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

在新的布局中，我可以将顶部和底部的链接放在最外层的组件中。

创建并分页

想清楚情况之后，我们来创建一个Page，首先删除.vue（因为这个页面不需要它），然后创建List.vue和.vue，为后续的开发做准备。

创建完成后，修改/.js中的以下部分：

= [{路径：'/'，名称：'home'，：（）=>（/*：“home”*/'..//Home.vue'）}，{路径：'/list/：cmd'，名称：'list'，：（）=>（/*：“list”*/'..//List.vue'）}，{路径：'/cmd/：cmd'，名称：''，：（）=>（/*：“cmd”*/'..//.vue'）}]

完成定义之后，我们可以通过以下方式访问具体的命令：

定义页面

接下来，我们需要编写 Home、List 和三个页面。由于这三个页面在内容方面没有太多可借鉴之处，因此我们将更多地关注如何使用

上面的代码是我在三个页面几乎都用到的结构，删除一些没用的代码之后，几乎在每个页面都能看到它，这里我重点说一下一些比较特殊的用法。

首先是在 v-text- 上添加 @="" 绑定，这个绑定有助于在用户点击 之后自动触发事件，这样，用户输入命令之后，按下 键，后续操作就会自动执行，而不需要移动鼠标指针去点击按钮开始搜索。

其次我们将其添加到v-text-中，实现进入页面后，自动添加输入框，方便用户在页面加载完成后输入命令。

这样的配置可以给用户最好的体验。

此外，我还用它来做数据调整，以确保我能控制内容。

部分小功能采用骨架图来优化体验

由于我们的应用在列表页和详情页都有数据查询的时候，为了防止应用因为加载而退出页面，我添加了v--组件，让用户在查询的时候能够看到数据。骨架图，缓解用户焦虑。

在组件层面我配置了v-if来控制显示，并且设置type为card,,card,来支持多样化的组件加载。

总结

本部分利用Vue的、和构建了页面的基本逻辑，并使用一些基础组件来构建页面。

这一部分我想跟大家多讲一下UI部分，我们在做的时候不仅仅要考虑界面，还要考虑UX体验的优化，组件库给我们提供了配置项，可以优化产品体验。