山寨有道？这个页面设计太猛了

一、页面设计

这不是抄袭有道词典做出来的山寨版吗？咱先来看看界面，抬头一看，顶部的导航栏和下面的搜索框，再往底下瞅就是检索到的内容，就这么简单明了。导航栏，头条、翻译几个字足够瞭目，点一下LOGO就能跳回去，简单粗暴；搜一下框，小框子外加一个按钮，输关键词就出答案，之前那个字面意思，动作快不说还高效。看下方的检索结果，都是词句解释和实例，规规矩矩，看起来挺顺眼的。

二、组件的划分

这个网站超简单，就三个部分：上面的导航栏，中间的查找框和下面显示的搜索结果。记得，导航栏用着得方便；查询框，当然得好用啦但看着也要清爽；查到啥了就在下边展示呗，字体肯定要清楚点儿别糊里糊涂的。

三、组件的实现

1.导航栏组件

哥们儿，咱们首先把App.vue里的导航栏搞定，再搞个NavBar.vue来配合。有的放矢，让它看起来更炫酷，面积也大点儿。导航条上得有Logo，加上”首页”和”翻译”这俩按键，这样大家换页面时就顺畅不少了。

  

    
    
  


import NavBar from './components/NavBar.vue'
export default {
  name: 'App',
  components: {
    NavBar
  }
}


/* 全局样式 */

2.搜索框组件

这个，就是个网上搜东西用的工具，跟你平时上网搜索差不多。只要输入关键词再点击搜索就好，啥信息都能找得到！大致操作就是跟网页界面中常见的搜索栏差不多，加入高大上的SearchBox.vue文件后，调整下样式和功能即可完成。想查啥，轻轻按下按钮就能立刻找到！

  

    

      
      
首页
      
翻译
    
    

      
    
  


export default {
  name: 'NavBar',
  methods: {
    backToHome() {
      this.$router.push('/')
    }
  }
}


/* 导航栏样式 */

3.搜索结果组件

别担心，搜索结果保证看得舒服又明白，帮你轻松找到大量清晰明确的信息！首要是在App.vue文件里装上搜索结果组件，然后再搞个独立的SearchResult.vue文件，美美地展现出来就行！怎么操作？先去向别人借点数据（当然要勇敢地开口），以列表的方式展示给用户，还得把每个词的意思告诉他们，让他们感到心中有数哈~

  

    
    
    
  


import NavBar from './components/NavBar.vue'
import SearchBox from './components/SearchBox.vue'
export default {
  name: 'App',
  components: {
    NavBar,
    SearchBox
  }
}


/* 全局样式 */

这些功能挺顺手的，添点儿小彩蛋也许会让你们更满意！不管你上回看过什么，历史纪录都能帮你记住它在哪里，下次再来直接点开就好了；生词本，捡起来新单词随时背，不怕记不住！

  

    
    搜索
  


export default {
  name: 'SearchBox',
  data() {
    return {
      searchWord: ''
    }
  },
  methods: {
    search() {
      // 跳转到搜索结果页面，将searchWord作为查询参数
      this.$router.push({path: '/search', query: {word: this.searchWord}})
    }
  }
}


/* 搜索框样式 */

你知道不？那款有道词典的页面设计好炫酷，是用Vue框架搞定的！它虽功能全了，但是要想真正做得好，还得打磨一番让用户用得舒服看起来也顺眼。

看了这文儿，Vue用法搞定！建网站啥的，速度飞起！特别是设计师们，你们懂？用它做UI美得爆炸，直接能用在实际项目上！省事儿又高效！

想学vue吗？对前端开发感兴趣？试试仿照有道词典的界面！轻松体验，快乐学习，技术提升不费劲～

  

    
    
    
    
  


import NavBar from './components/NavBar.vue'
import SearchBox from './components/SearchBox.vue'
import SearchResult from './components/SearchResult.vue'
export default {
  name: 'App',
  components: {
    NavBar,
    SearchBox,
    SearchResult
  }
}


/* 全局样式 */

。