扬州,这座历史文化名城,以其秀美的自然风光和深厚的人文底蕴,吸引了无数游客。为了更好地帮助游客规划行程,我们可以利用Vue框架搭建一个扬州旅游攻略网站。本文将详细介绍如何使用Vue框架快速搭建一个功能全面的攻略大全。
一、项目准备
在开始搭建网站之前,我们需要准备以下工具和资源:
- Node.js和npm:用于项目搭建和依赖管理。
- Vue CLI:Vue官方提供的脚手架工具,用于快速生成项目结构。
- 相关API:用于获取扬州旅游信息,如景点、美食、住宿等。
- 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框架轻松搭建一个扬州旅游攻略网站。这个网站包含了景点、美食、住宿等信息,可以帮助游客更好地规划行程。在实际开发过程中,可以根据需求添加更多功能,如搜索、评论、分享等。希望本文对您有所帮助!
