Vue新手教程：从零装Vue到打造高清通讯录，让微信更舒心

一、准备工作

首先，得把Vue给装上去，别忘了塞点开发工具进去。有点费劲？不要紧的，跟着官方教程走慢慢来就行了，快不了哟～搞定了这个，我们就可以大胆地搞新项目！怎么弄？简单！直接拿Vue CLI解决就行了。下面我给你仔细说说怎么玩儿吧：

1.进入项目目录：

bash
cd your_project_name

vue create wechat-contacts

2.运行项目：

cd wechat-contacts

npm run serve

npm run serve

试试在浏览器中输入localhost:8080，应该会看到啥东西也没有，这就表示咱家的Vue项目启动起来了！

二、搭建界面

别慌咱慢慢来，弄个好看的通讯录！第一步，在SRC文件夹里创建个叫Contacts.vue的新文件夹，就是这样。接下来，在App.vue文件里面添加一句Contacs，搞定！浏览器刷新一下，看看，是不是有个整洁高清的通讯录页面了？还有搜索框和联系人列表！

  

    

      
    
    

      

        

          
{{ contact.name[0] }}
          

            
{{ contact.name }}
            
{{ contact.message }}
          
          
{{ contact.time }}
        
      
    
  


export default {
  data() {
    return {
      keyword: '',
      contacts: [
        { id: 1, name: '张三', message: '你好', time: '12:30' },
        { id: 2, name: '李四', message: '在吗', time: '13:45' },
        { id: 3, name: '王五', message: '有新的消息', time: '15:20' },
        { id: 4, name: '赵六', message: '明天见', time: '17:10' }
      ]
    }
  },
  computed: {
    filteredContacts() {
      return this.contacts.filter(contact => {
        return contact.name.toLowerCase().includes(this.keyword.toLowerCase());
      });
    }
  }
}


.header {
  padding: 10px;
  background-color: #f5f5f5;
}
.header input {
  width: 100%;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.contacts-list {
  margin-top: 20px;
}
.contacts-list ul {
  list-style-type: none;
  padding: 0;
}
.contacts-list li {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.avatar {
  width: 40px;
  height: 40px;
  background-color: #ccc;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  margin-right: 10px;
  font-size: 20px;
  color: #fff;
}
.info {
  flex-grow: 1;
}
.name {
  font-size: 16px;
  font-weight: bold;
}
.message {
  font-size: 14px;
  color: #999;
}
.time {
  font-size: 14px;
  color: #999;
}

三、实现交互效果

包好了界面，得加点互动的东西，让微信用着更舒心，玩起来也更好玩喔～

  

    
  


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


#app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

1.点击联系人添加到聊天会话

让咱来给 Contactus.vue 的组件添点儿功能，比如点一下联系人就能看他们的聊天片段首先，咱就在 data 那里弄个数组 chatContact，放上已存好的朋友信息；接着，在 methods 那儿搞个叫 addToChat 的方法，方便添加新客户；最后再调整下模板，让聊天记录变得明了起来。

2.搜索联系人动态更新

要想用到嗨皮，得搞定一个问题：搜联系人时，名单得跟上趟儿。我来给Compute加点料，filterChatContacts，这不就成了专属搜索器？看到关键词，就能找出你心中那个最佳好友。

搞定搞定了微信那种炫酷的聊天效果，就用了Vue那套框架。各种时髦的互动，轻轻一点就行，用着绝对超级爽快！

四、总结与展望

给你介绍篇特牛的文章，教你怎么用Vue做出像微信那种劲爆的联系列表！更有实际操作案例等着你来挑战！快过来瞧瞧，说不定能点燃你对前端编程的热情！

data() {
  return {
 ...
 chatContacts: []
  }
}

哎呦前端技术以后可不得了！vue这么给力火热的框架你知道吗？用好了，搞网站就像玩游戏似的。利用Vue强大的功能和好用的小工具，网站不仅做得飞快，而且还能好玩到让人停不下来哟~

别气馁！多练多试，技术马上进步！勇往直前天天学新东西才能走在潮流前端，让大家享受更棒的体验嘛～

methods: {
  addToChat(contact) {
 if (!this.chatContacts.includes(contact)) {
   this.chatContacts.push(contact);
 }
  }
}

希望文章对你有帮助，别忘了经常刷刷前端新知识啊!要敢于迎接挑战哦!

  

...

  

 

   
{{ contact.name[0] }}
   
{{ contact.name }}
 
  

。