vue+Element实现静态旅游网站 |
您所在的位置：网站首页 › vue前台门户网站模板 › vue+Element实现静态旅游网站 |
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
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: '', 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 去哪嗨 24小时服务热线： 123-456-7890 {{list.title}} © 2018 finish xiaoying 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) } } }新增：index.vue 旅行资讯 {{inf.title}} {{inf.msg}} {{inf.time}} 【{{inf.title}}】 旅行攻略 {{raidersData.title}} {{address}} 美食景点 {{ item.title }} {{ item.description }} 尼泊尔优美风景 {{xcList.title}} {{list.msg}} ¥{{list.price}}起 {{list.feedback}} {{list.msg}} ¥{{list.price}}起 {{list.feedback}} 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%' }] } } } git地址：myvue |
【本文地址】
今日新闻 |
推荐新闻 |