页面效果：
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
vue+Element实现静态旅游网站
原文地址：https://www.cnblogs.com/yingzi1028/p/8270225.html