Experience Linux applets

The small program end

PC

Visit tldr.linux.cn/ Experience

Workload analysis

As we proceed with this part of development, we need to arrange and categorize the functions accordingly.

In a nutshell, I need to develop three pages:

  1. Home page: The home page is responsible for user default access.
  2. List page: The list page is in the search process, if there are multiple results, then enter the list page. If you have a single result, you should go to the details page.
  3. Result page: The result page is responsible for displaying the specific translation results of the command.

According to the actual work of component separation, I need a Layout component to be responsible for the overall page environment rendering. However, considering the reuse of components, it was decided to optimize the Title on the home page to make it consistent with the details page.

In the new layout, I can put the title at the top and the Link at the bottom in the outermost component.

Create Router & Page

After thinking about the situation, let’s create the Router and Page. First, delete the about. vue from the Views page (because we don’t need this page). Then create list. vue and result. vue for subsequent development preparation.

After creating router/index.js, modify the Routes section of router/index.js

const routes = [
  {
    path: '/'.name: 'home'.component: (a)= > import(/* webpackChunkName: "home" */ '.. /views/Home.vue')}, {path: '/list/:cmd'.name: 'list'.component: (a)= > import(/* webpackChunkName: "list" */ '.. /views/List.vue')}, {path: '/cmd/:cmd'.name: 'command'.component: (a)= > import(/* webpackChunkName: "cmd" */ '.. /views/Result.vue')}]Copy the code

After complete the definition, we can through the form such as https://tldr.linux.cn/list/ls and https://tldr.linux.cn/cmd/ls access to specific commands.

Notice that I’ve turned on the History Mode ahead of time

Define the page

Next, you need to write the Home, List, and Result pages. Since these three pages don’t have much to draw from in terms of content, we focus more on using Script parts of the page.

<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>Copy the code

The above code is the same structure THAT I used on almost all three pages, and when I remove some of the useless code, I can see it on almost every page. Here I highlight some of the more specific uses.

The first one is the @keyDown =”onKeyDown” binding in the V-text-field, which will help trigger the event automatically when the user hits enter. In this way, after the user enters the command, press Enter and the subsequent operations will be performed automatically, without the need to move the mouse pointer to click the button to start the search.

Secondly, autofocus is added in v-text-field to realize that focus is automatically added into the input box after entering the page, so that users can enter commands after the page is loaded.

Such configurations can make the user experience the best.

In addition to that, I use computed to do data adjustments, to make sure I can control the content.

A few small feature points

Use skeleton diagrams to optimize the experience

Since our application has data query time in the list page and details page, in order to prevent the application from exiting the page due to loading, I added the V-skeleton-loader component, so that users can look at the skeleton diagram to relieve their anxiety during data query.

At the component level, configure the v – if I do display control, and set the type of card, the article, the card, the article to implement diversification component loading support.

 <v-skeleton-loader
    v-if="isLoaded"
    type="card,article,card,article"
    min-height="800"
    ></v-skeleton-loader>
Copy the code

conclusion

In this section, the basic logic of the page is built with Vue’s Method, onKeyDown, and computed. Build the page with some of Vuetify’s basic components.

In this part, I would like to tell you more about the UI part. We need to consider not only the interface, but also the optimization of UX experience. The configuration project provided by the component library can optimize the product experience.