帮我用vue 和css写一个类似微信通讯录的界面，要求用view

好的，我可以为您提供一些代码示例和提示，但是需要您先确认一下您的意思是“用Vue和CSS编写”，而不是“用View编写”吗？

如果您的意思是用Vue和CSS编写，那么可以按照以下步骤进行：

1. 创建Vue项目，并安装相关依赖

vue create my-project
cd my-project
npm install --save vue-router

2. 创建一个通讯录组件

在`src/components`文件夹下创建一个`Contacts.vue`组件，用于显示通讯录列表。

在组件中，您可以使用`v-for`指令来遍历通讯录列表，并使用`v-bind`指令将数据绑定到页面上。

例如，以下是一个简单的模板：

<template>
  <div class="contacts">
    <div v-for="(contact, index) in contacts" :key="index" class="contact">
      <div class="avatar">{{ contact.avatar }}</div>
      <div class="info">
        <div class="name">{{ contact.name }}</div>
        <div class="message">{{ contact.message }}</div>
      </div>
    </div>
  </div>
</template>

3. 添加样式

使用CSS样式来为通讯录添加样式。例如，您可以使用Flex布局来实现通讯录列表的排列。

以下是一个简单的样式示例：

.contacts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact {
  display: flex;
  gap: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.name {
  font-size: 16px;
  font-weight: bold;
}

.message {
  font-size: 14px;
  color: #666;
}

4. 在Vue中使用组件

在Vue中使用`Contacts`组件，您需要在Vue实例中注册组件，并在模板中使用组件。

例如，以下是一个简单的Vue实例：

import Vue from 'vue'
import Contacts from './components/Contacts.vue'

new Vue({
  el: '#app',
  components: {
    Contacts
  }
})

然后您可以在模板中使用`Contacts`组件：

<div id="app">
  <contacts :contacts="contacts"></contacts>
</div>

其中，`:contacts`是组件的一个`props`属性，用于传递通讯录数据。在Vue实例中，您需要定义一个`contacts`数据，然后将其传递给`Contacts`组件。

new Vue({
  el: '#app',
  components: {
    Contacts
  },
  data: {
    contacts: [
      {
        name: '张三',
        avatar: 'ZS',
        message: '你好，最近还好吗？'
      },
      {
        name: '李四',
        avatar: 'LS',
        message: '今天天气不错，一起出去吃饭吧？'
      },
      // ...
    ]
  }
})

这样，您就可以在页面上看到一个类似微信通讯录的界面了。