vue搭建“说旅游”主页
时间: 2023-06-17 14:02:21 浏览: 53
要使用Vue搭建“说旅游”主页,你需要先安装Vue和Vue CLI。安装完成后,按照以下步骤操作:
1. 创建一个新的Vue项目
在命令行中输入以下命令创建一个新的Vue项目:
```
vue create shuolyou
```
然后选择你需要的配置和插件。
2. 安装需要的依赖
在项目目录下运行以下命令安装需要的依赖:
```
npm install vue-router axios vant --save
```
其中,vue-router是Vue的路由插件,axios是用于发起HTTP请求的插件,vant是一套Vue组件库。
3. 创建页面和组件
在src目录下创建一个views目录,用于存放页面。在views目录下创建一个Home.vue文件,作为主页。在其中可以添加一些组件,比如顶部导航栏、轮播图、推荐景点等等。
在src目录下创建一个components目录,用于存放公共组件。可以创建一些通用的组件,比如顶部导航栏、底部导航栏、轮播图等等。
4. 配置路由
在src目录下创建一个router目录,用于存放路由相关的文件。在router目录下创建一个index.js文件,用于配置路由。
在index.js中引入Vue和vue-router,然后配置路由:
```
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
}
]
})
```
这里只创建了一个路由,指向了Home组件。
5. 编写页面和组件的代码
根据需要,编写页面和组件的代码。这里以Home.vue为例:
```
<template>
<div class="home">
<van-nav-bar title="说旅游"></van-nav-bar>
<van-swipe :autoplay="3000">
<van-swipe-item><img src="https://picsum.photos/id/1004/500/300"></van-swipe-item>
<van-swipe-item><img src="https://picsum.photos/id/1015/500/300"></van-swipe-item>
<van-swipe-item><img src="https://picsum.photos/id/1025/500/300"></van-swipe-item>
</van-swipe>
<van-row>
<van-col span="12"><img src="https://picsum.photos/id/1035/250/150"></van-col>
<van-col span="12"><img src="https://picsum.photos/id/1045/250/150"></van-col>
</van-row>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
<style scoped>
.home {
padding: 10px;
}
</style>
```
这里使用了vant组件库中的nav-bar、swipe、row、col组件,以及picsum.photos提供的随机图片。你可以根据需要选择其他组件或自己编写组件。
6. 在App.vue中引入路由和页面组件
在App.vue中引入路由和页面组件,并将页面组件放置在router-view中:
```
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
import router from '@/router'
export default {
name: 'App',
router
}
</script>
```
7. 运行项目
在命令行中输入以下命令启动项目:
```
npm run serve
```
然后在浏览器中访问http://localhost:8080即可看到“说旅游”主页。