用vue写一个好客租房项目

好的，下面是一个简单的好客租房项目的vue实现：

首先，我们需要安装Vue CLI脚手架工具来创建一个Vue项目。

npm install -g @vue/cli
vue create haokezufang

然后，我们可以使用Element-UI组件库来构建页面，并使用axios库与后端API进行通信。

npm install element-ui axios

接下来，我们可以在src/components目录下创建我们的组件：

1. Home.vue：首页组件
2. List.vue：房源列表组件
3. Detail.vue：房源详情组件

然后，在src/router目录下，我们可以创建路由文件index.js来配置我们的路由：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import List from '@/components/List'
import Detail from '@/components/Detail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/list',
      name: 'List',
      component: List
    },
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    }
  ]
})

最后，在src/App.vue文件中，我们可以使用Element-UI的Header、Footer和Container组件来构建我们的页面布局，并在router-view中展示我们的组件。

<template>
  <div id="app">
    <el-header>
      // Header内容
    </el-header>
    <el-container>
      <router-view></router-view>
    </el-container>
    <el-footer>
      // Footer内容
    </el-footer>
  </div>
</template>

<script>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'

export default {
  name: 'app',
  components: {
    'app-header': Header,
    'app-footer': Footer
  }
}
</script>

至此，我们的好客租房项目就完成了。当然，这只是一个简单的实现，你可以继续完善它，添加更多功能和特性。