正文

扬州旅游攻略网站，Vue框架轻松搭建攻略大全

/0 浏览量
0521

扬州，这座历史文化名城，以其秀美的自然风光和深厚的人文底蕴，吸引了无数游客。为了更好地帮助游客规划行程，我们可以利用Vue框架搭建一个扬州旅游攻略网站。本文将详细介绍如何使用Vue框架快速搭建一个功能全面的攻略大全。

一、项目准备

在开始搭建网站之前，我们需要准备以下工具和资源：

  1. Node.js和npm：用于项目搭建和依赖管理。
  2. Vue CLI：Vue官方提供的脚手架工具，用于快速生成项目结构。
  3. 相关API：用于获取扬州旅游信息，如景点、美食、住宿等。
  4. UI组件库：如Element UI、Vuetify等，用于快速搭建页面。

二、项目搭建

1. 初始化项目

打开终端，执行以下命令初始化项目：

vue create yangzhou-tour

选择默认配置或手动配置，然后安装Vue Router和Vuex。

2. 配置路由

在src/router目录下创建index.js文件，配置路由：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Scenery from '@/components/Scenery'
import Food from '@/components/Food'
import Accommodation from '@/components/Accommodation'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/scenery',
      name: 'scenery',
      component: Scenery
    },
    {
      path: '/food',
      name: 'food',
      component: Food
    },
    {
      path: '/accommodation',
      name: 'accommodation',
      component: Accommodation
    }
  ]
})

3. 配置Vuex

在src/store目录下创建index.js文件，配置Vuex：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    sceneryList: [],
    foodList: [],
    accommodationList: []
  },
  mutations: {
    setSceneryList(state, list) {
      state.sceneryList = list
    },
    setFoodList(state, list) {
      state.foodList = list
    },
    setAccommodationList(state, list) {
      state.accommodationList = list
    }
  },
  actions: {
    fetchSceneryList({ commit }, params) {
      // 调用API获取景点信息
    },
    fetchFoodList({ commit }, params) {
      // 调用API获取美食信息
    },
    fetchAccommodationList({ commit }, params) {
      // 调用API获取住宿信息
    }
  }
})

4. 创建组件

在src/components目录下创建以下组件：

  • Home.vue：首页
  • Scenery.vue：景点列表
  • Food.vue：美食列表
  • Accommodation.vue：住宿列表

三、页面实现

1. 首页

在Home.vue组件中，可以展示扬州的简介、热门景点、美食和住宿等信息。

<template>
  <div>
    <h1>扬州旅游攻略大全</h1>
    <div>
      <h2>热门景点</h2>
      <ul>
        <li v-for="item in sceneryList" :key="item.id">
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div>
      <h2>热门美食</h2>
      <ul>
        <li v-for="item in foodList" :key="item.id">
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div>
      <h2>热门住宿</h2>
      <ul>
        <li v-for="item in accommodationList" :key="item.id">
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['sceneryList', 'foodList', 'accommodationList'])
  },
  created() {
    this.fetchSceneryList()
    this.fetchFoodList()
    this.fetchAccommodationList()
  },
  methods: {
    ...mapActions(['fetchSceneryList', 'fetchFoodList', 'fetchAccommodationList'])
  }
}
</script>

2. 景点列表

在Scenery.vue组件中，展示扬州的景点信息。

<template>
  <div>
    <h1>扬州景点大全</h1>
    <ul>
      <li v-for="item in sceneryList" :key="item.id">
        <h2>{{ item.name }}</h2>
        <p>{{ item.description }}</p>
        <img :src="item.image" alt="景点图片">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    sceneryList() {
      return this.$store.state.sceneryList
    }
  }
}
</script>

3. 美食列表

在Food.vue组件中，展示扬州的美食信息。

<template>
  <div>
    <h1>扬州美食大全</h1>
    <ul>
      <li v-for="item in foodList" :key="item.id">
        <h2>{{ item.name }}</h2>
        <p>{{ item.description }}</p>
        <img :src="item.image" alt="美食图片">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    foodList() {
      return this.$store.state.foodList
    }
  }
}
</script>

4. 住宿列表

在Accommodation.vue组件中，展示扬州的住宿信息。

<template>
  <div>
    <h1>扬州住宿大全</h1>
    <ul>
      <li v-for="item in accommodationList" :key="item.id">
        <h2>{{ item.name }}</h2>
        <p>{{ item.description }}</p>
        <img :src="item.image" alt="住宿图片">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    accommodationList() {
      return this.$store.state.accommodationList
    }
  }
}
</script>

四、数据获取

在组件的created钩子中，调用Vuex的actions来获取数据。以下是一个获取景点信息的示例：

fetchSceneryList({ commit }, params) {
  // 调用API获取景点信息
  axios.get('http://api.example.com/scenery', { params })
    .then(response => {
      commit('setSceneryList', response.data)
    })
    .catch(error => {
      console.error(error)
    })
}

五、总结

通过以上步骤，我们可以使用Vue框架轻松搭建一个扬州旅游攻略网站。这个网站包含了景点、美食、住宿等信息，可以帮助游客更好地规划行程。在实际开发过程中，可以根据需求添加更多功能，如搜索、评论、分享等。希望本文对您有所帮助！

-- 展开阅读全文 --