vue+Element實現靜態旅遊網站

時間 2021-07-30

標籤 javascript css html vue java git vue-router vue-cli npm element-ui 欄目網站開發简体版

原文原文鏈接

頁面效果：javascript

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中加入：css

我不想用8080端口號，因此在package.json中將端口號修改成：8086html

3.項目運行後發現，總是加一個「/#/」的後綴，解決方法：

4.引入element-ui：npm install element-ui --save

main.jsvue

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 }
})

接下來根據所需，新增、修改相應文件。java

項目目錄：git

修改：index.js，仍是由於懶，因此後面幾個路由都配置成同樣的。嘻嘻vue-router

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.vuevue-cli

<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.vuenpm

<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>