vue+Element实现静态旅游网站
页面效果：
1.用vue脚手架：vue-cli，新建一个vue项目。
2.npm run dev后，给小颖了一句提示：Your application is running here:http://localhost:8080/ ，小颖比较懒，觉得还是喜欢以前那种执行完npm run dev后，会在你默认的浏览器中自动打开http://localhost:8080/ ，所以小颖将提示语删了：
再给package.json中加入：
我不想用8080端口号，所以在package.json中将端口号修改为：8086
3.项目运行后发现，老是加一个 “/#/” 的后缀，解决方法：
4.引入element-ui：npm install element-ui –save
main.js
import Vue from \'vue\' import App from \'./App\' import ElementUI from \'element-ui\' import \'element-ui/lib/theme-chalk/index.css\' import router from \'./router\' Vue.use(ElementUI) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: \'#app\', router, template: \'<App/>\', components: { App } })
接下来根据所需，新增、修改相应文件。
项目目录：
修改：index.js，还是因为懒，所以后面几个路由都配置成一样的。嘻嘻
import Vue from \'vue\' import Router from \'vue-router\' import helloWorld from \'@/components/HelloWorld\' import index from \'@/pages/index\' Vue.use(Router) export default new Router({ mode: \'history\', routes: [{ path: \'/\', name: \'index\', component: index }, { path: \'/helloWorld\', name: \'helloWorld\', component: helloWorld },{ path: \'/a\', name: \'helloWorld\', component: helloWorld },{ path: \'/b\', name: \'helloWorld\', component: helloWorld },{ path: \'/c\', name: \'helloWorld\', component: helloWorld },{ path: \'/d\', name: \'helloWorld\', component: helloWorld }] })
修改：App.vue
<template> <div id="app"> <div class="tourism-content"> <el-header style="width: 1348px; height: 153px; padding:0;" class=\'top-header\'> <el-row> <el-col :span="4" :offset="2"> <div class="grid-content"> <img style="width: 140px;" src="./assets/flower.jpg"> </div> </el-col> <el-col :span="10"> <div class="grid-content text-shadow"> 去哪嗨 </div> </el-col> <el-col :span="8" class="el-col-phone"> <div class="grid-content"> <i class="el-icon-phone-outline"></i> 24小时服务热线： <span class="tel">123-456-7890</span> </div> </el-col> </el-row> <el-row class="el-row-header"> <el-col :span="16" :offset="2"> <div class="grid-content"> <el-menu background-color="#4ce230" text-color="#fff" active-text-color="#ffd04b" :default-active="activeIndex" class="el-menu-header" mode="horizontal" @select="handleSelect" :router="true"> <el-menu-item v-for=\'list in menuData\' :key="list.id" :index="list.href">{{list.title}} </el-menu-item> </el-menu> </div> </el-col> <el-col :span="4"> <div class="grid-content search-content"> <el-input placeholder="请输入内容" prefix-icon="el-icon-search"> </el-input> </div> </el-col> </el-row> </el-header> <el-container class=\'main-content\' style="width: 1270px;"> <keep-alive> <router-view></router-view> </keep-alive> </el-container> <el-footer style="width: 1348px; height: 80px;" class=\'bottom-footer\'> <p>© 2018 finish xiaoying</p> </el-footer> </div> </div> </template> <script> export default { name: \'app\', data() { return { activeIndex: \'./\', menuData: [{ id: \'1\', title: \'首页\', href: \'./\' }, { id: \'2\', title: \'旅行攻略\', href: \'/helloWorld\' }, { id: \'3\', title: \'酒店推荐\', href: \'/a\' }, { id: \'4\', title: \'美食景点\', href: \'/b\' }, { id: \'5\', title: \'旅游资讯\', href: \'/c\' }, { id: \'6\', title: \'问路达人\', href: \'/d\' }] } }, mounted: function() { const h = this.$createElement; this.$notify({ title: \'2018新年出游计划\', message: h(\'div\', { style: \'color: red;font-weight: bold;font-size: 30px;\' }, \'全场最高立减五百元\'), duration: 50000 }); }, methods: { handleSelect(key, keyPath) { this.activeIndex = key; console.log(key, keyPath) } } } </script>
新增：index.vue
<template> <div class="index-wrap"> <el-container> <el-aside class=\'left-menu\' width="360px"> <div class="index-left-block"> <h2>旅行资讯</h2> <div class="container-list pic_news"> <template v-for=\'inf in informationData\' v-if=\'inf.img\'> <img :src="inf.img" :alt="inf.title"> <h3> <a href="javascript:void(0);">{{inf.title}}</a> </h3> <p>{{inf.msg}}</p> </template> <ul> <li v-for=\'inf in informationData\' v-if=\'!inf.img\'> <span>{{inf.time}}</span> <a href="javascript:void(0);">【{{inf.title}}】</a> </li> </ul> </div> </div> <div class="index-left-block"> <h2>旅行攻略</h2> <div class="container-list product_list"> <img :src="raidersData.img" :alt="raidersData.title"> <h3><a href="javascript:void(0);">{{raidersData.title}}</a></h3> <div class="address-tag-container"> <el-tag v-for="address in raidersAddressDt" :key="address.id" type="success">{{address}}</el-tag> </div> </div> </div> <div class="index-left-block"> <h2>美食景点</h2> <div class="container-list food"> <el-carousel height="150px" indicator-position="outside"> <el-carousel-item v-for="item in deliciousFoodDt" :key="item.id"> <a :href="item.href" target="_blank"> <img width="300px" height="150px" :src="item.img"></a> <div class="mask"> <h3>{{ item.title }}</h3> <p>{{ item.description }}</p> </div> </el-carousel-item> </el-carousel> </div> </div> </el-aside> <el-main style="padding: 15px 0;"> <el-carousel :interval="500000" height="500px" arrow="always"> <el-carousel-item v-for="scenery in nepalSceneryDt" :key="scenery.id"> <img width="908px" height="500px" :src="scenery.img"> <div class="mask"> <h3>尼泊尔优美风景</h3> </div> </el-carousel-item> </el-carousel> <div class="fiery-activity"> <el-container> <el-aside width="252px"> <a class="xinchun-link" target="_blank" href="http://www.tuniu.com/szt/SpringFestival2018/2702.html"></a> <div class="xinchun-memu"> <ul> <li class="xinchun_item" v-for="xcList in xinchunData"> <a target="_blank" :href="xcList.href">{{xcList.title}}</a> </li> </ul> </div> </el-aside> <el-main class="fiery-activity-main"> <el-row> <el-col :span="11" v-for="list in sellWellDt" :key="list.id" v-if="list.id<3"> <div class="grid-content"> <a target="_blank" :href="list.href"> <img :src="list.img" :alt="list.title"> </a> <div class="activity_mess"> <a target="_blank" :href="list.href"> <span><{{list.title}}></span> {{list.msg}} </a> </div> <div class="activity_price"> <el-row> <el-col :span="12"> ¥<span>{{list.price}}</span>起 </el-col> <el-col :span="12">{{list.feedback}}</el-col> </el-row> </div> </div> </el-col> </el-row> <el-row> <el-col :span="11" v-for="list in sellWellDt" :key="list.id" v-if="list.id>2"> <div class="grid-content"> <a target="_blank" :href="list.href"> <img :src="list.img" :alt="list.title"> </a> <div class="activity_mess"> <a target="_blank" :href="list.href"> <span><{{list.title}}></span> {{list.msg}} </a> </div> <div class="activity_price"> <el-row> <el-col :span="12"> ¥<span>{{list.price}}</span>起 </el-col> <el-col :span="12">{{list.feedback}}</el-col> </el-row> </div> </div> </el-col> </el-row> </el-main> </el-container> </div> </el-main> </el-container> </div> </template> <script> export default { components: {}, data() { return { informationData: [{ id: 1, title: \'520 我在路上等着你！\', msg: \'活动时间：5月20日—5月25日获奖公布时间：5月26日\', time: \'2017-05-20\', img: require(\'./../assets/news.jpg\') }, { id: 2, title: \'达人访谈 用户篇\', msg: \'“有为屌丝”在路上\', time: \'2017-06-20\' }, { id: 3, title: \'有奖活动\', msg: \'写给父亲三行书信\', time: \'2017-06-22\' }, { id: 4, title: \'朋友，请晒出你的足迹\', msg: \'活动获奖公告\', time: \'2017-07-01\' }, { id: 5, title: \'旅行语录\', msg: \'邂逅——最美的风景永远在路上\', time: \'2017-08-05\' } ], raidersData: { id: 5, title: \'10天尼泊尔自由行游记兼攻略\', msg: \' 加德满都～帕坦～博卡拉～奇特旺，从签证、机票、服装、生活用品、药品汇率解析如何玩转尼泊尔。内含闺蜜拍照技巧分享，想去尼泊尔吃喝玩乐的小伙伴速速get吧。\', time: \'2017-08-05\', img: require(\'./../assets/css.jpg\') }, raidersAddressDt: [\'加德满都\', \'帕坦\', \'博卡拉\', \'哈尔滨\', \'奇特旺\'], deliciousFoodDt: [{ id: 1, href: \'http://www.mafengwo.cn/cy/10035/8962.html\', title: \'辣到忘不掉的美味火锅\', description: \'川菜中最具革命性的是火锅，锅底多样...\', img: require(\'./../assets/meishi1.jpeg\') }, { id: 2, href: \'http://www.mafengwo.cn/cy/10035/13359.html\', title: \'成都人气川菜餐厅推荐\', description: \'川菜早在千余年前就颇负盛名，以其色...\', img: require(\'./../assets/meishi2.jpeg\') }, { id: 3, href: \'http://www.mafengwo.cn/cy/10035/8959.html\', title: \'最受欢迎的风味烧烤店\', description: \'烧烤，这一风味小吃，其火...\', img: require(\'./../assets/meishi3.jpeg\') }, { id: 4, href: \'http://www.mafengwo.cn/cy/10035/13364.html\', title: \'私享宽窄巷子人气餐厅\', description: \'在宽窄巷子里，选择一处佳地...\', img: require(\'./../assets/meishi4.jpeg\') }, { id: 5, href: \'http://www.mafengwo.cn/cy/10035/13363.html\', title: \'锦里的超人气风味美食店\', description: \'尽管锦里并不以美食为主，但其...\', img: require(\'./../assets/meishi5.jpeg\') }], nepalSceneryDt: [{ id: 1, img: require(\'./../assets/niboer1.jpg\') }, { id: 2, img: require(\'./../assets/niboer2.jpg\') }, { id: 3, img: require(\'./../assets/niboer3.jpg\') }, { id: 4, img: require(\'./../assets/niboer4.jpg\') }, { id: 5, img: require(\'./../assets/niboer5.jpg\') }], xinchunData: [{ id: 1, title: \'新春出境 好礼换购\', href: \'http://www.tuniu.com/szt/SpringFestival2018/2702.html\' }, { id: 2, title: \'海南新春行 享壕礼\', href: \'http://www.tuniu.com/szt/hainanwintour/2702.html\' }, { id: 3, title: \'东北雪国 满5000元减50元\', href: \'http://www.tuniu.com/szt/17winortheast/2702.html\' }, { id: 4, title: \'邮轮年终特惠 1599起\', href: \'http://www.tuniu.com/szt/youlunnianzhong/2702.html\' }], sellWellDt: [{ id: 1, title: \'泰国曼谷-芭提雅机票+当地5晚6日游\', msg: \'美食之旅 发班3年老字号 1晚泳池别墅 希尔顿下午茶 杜拉拉水上市场 无自费 五星海航 微信管家\', img: require(\'./../assets/chunjie1.jpg\'), href: \'http://www.tuniu.com/tour/210125600\', price: \'4009\', feedback: \'满意度 91%\' }, { id: 2, title: \'日本本州8日游\', msg: \'西安直飞大阪，本州环岛，优选世界文化遗产白川乡，升级一晚温泉酒店，穿日式和服浴衣体验日式温泉，东京一天自由活动\', img: require(\'./../assets/chunjie2.jpg\'), href: \'http://www.tuniu.com/tour/210140583\', price: \'6031\', feedback: \'满意度 99%\' }, { id: 3, title: \'泰国-普吉岛6或7日游\', msg: \'西安直飞，连住2或3晚芭东凯悦酒店或同级，日游斯米兰，快艇珊瑚岛，神仙半岛，浮潜，4顿特色餐，含600礼包\', img: require(\'./../assets/chunjie3.jpg\'), href: \'http://www.tuniu.com/tour/210162944\', price: \'3039\', feedback: \'满意度 92%\' }, { id: 4, title: \'日本东京-大阪-京都-富士山7日游\', msg: \'两点进出，东京大阪全天自由活动含车接送，指定酒店，鲍鱼海鲜锅、蟹道乐，27种烤肉自助，46KG行李直挂\', img: require(\'./../assets/chunjie4.jpg\'), href: \'http://www.tuniu.com/tour/210147716\', price: \'7927\', feedback: \'满意度 97%\' }] } } } </script>
git地址：myvue
版权声明：本文为yingzi1028原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。