用vue做一个旅游网页

很好的选择！以下是一个简单的旅游网页的例子，使用了Vue.js、Vue Router和Axios。这个网页展示了旅游目的地和旅游套餐。你可以根据你的需求对它进行修改和扩展。

安装

# 使用npm安装依赖
npm install vue vue-router axios --save

创建Vue实例

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

创建路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Destinations from '../views/Destinations.vue'
import Packages from '../views/Packages.vue'
import PackageDetails from '../views/PackageDetails.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'destinations',
    component: Destinations
  },
  {
    path: '/packages',
    name: 'packages',
    component: Packages
  },
  {
    path: '/packages/:id',
    name: 'package-details',
    component: PackageDetails
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

创建组件

Destinations.vue

<template>
  <div>
    <h1>旅游目的地</h1>
    <ul>
      <li v-for="destination in destinations" :key="destination.id">
        <router-link :to="{ name: 'package-details', params: { id: destination.id }}">
          {{ destination.name }}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      destinations: []
    }
  },
  mounted() {
    axios.get('/api/destinations').then(response => {
      this.destinations = response.data
    })
  }
}
</script>

Packages.vue

<template>
  <div>
    <h1>旅游套餐</h1>
    <ul>
      <li v-for="package in packages" :key="package.id">
        <router-link :to="{ name: 'package-details', params: { id: package.id }}">
          {{ package.name }}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      packages: []
    }
  },
  mounted() {
    axios.get('/api/packages').then(response => {
      this.packages = response.data
    })
  }
}
</script>

PackageDetails.vue

<template>
  <div>
    <h1>{{ package.name }}</h1>
    <p>{{ package.description }}</p>
    <p>{{ package.price }}元</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      package: {}
    }
  },
  mounted() {
    axios.get(`/api/packages/${this.$route.params.id}`).then(response => {
      this.package = response.data
    })
  }
}
</script>

创建API

这里使用json-server创建API，它会自动创建一个RESTful API，非常方便。

# 使用npm安装json-server
npm install json-server --save-dev

然后，在项目根目录下创建一个db.json文件：

{
  "destinations": [
    {
      "id": 1,
      "name": "北京",
      "description": "北京故宫、长城、天安门、颐和园等景点"
    },
    {
      "id": 2,
      "name": "上海",
      "description": "上海外滩、东方明珠、城隍庙、豫园等景点"
    },
    {
      "id": 3,
      "name": "深圳",
      "description": "深圳欢乐谷、华侨城、世界之窗等景点"
    }
  ],
  "packages": [
    {
      "id": 1,
      "name": "北京五日游",
      "description": "北京故宫、长城、天安门、颐和园等景点",
      "price": 2000
    },
    {
      "id": 2,
      "name": "上海五日游",
      "description": "上海外滩、东方明珠、城隍庙、豫园等景点",
      "price": 2500
    },
    {
      "id": 3,
      "name": "深圳五日游",
      "description": "深圳欢乐谷、华侨城、世界之窗等景点",
      "price": 1800
    }
  ]
}

最后，在package.json中添加以下脚本：

{
  "scripts": {
    "dev": "json-server --watch db.json"
  }
}

现在运行npm run dev，就可以启动API了。你可以在浏览器中打开http://localhost:3000/destinations和http://localhost:3000/packages，查看API返回的数据。

这就是一个简单的旅游网页了！你可以根据你的需求添加更多的功能，比如用户注册和登录、支付等。祝你好运