2020/11/09、 周一、今天又是奮斗的一天。

@Author：Runsen

今天完成Vue項目城市詳細頁，并通過npm run build實現打包。

Banner.vue

<template><div><div class="banner" @click="handleBannerClick"><img class="banner-img" :src="bannerImg" /><div class="banner-info"><div class="banner-tittle">{{this.sightName}}</div><div class="banner-number"><span class="iconfont banner-icon">&#xe6c4;</span>{{this.bannerImgs.length}}</div></div></div><fade-animation><common-gallary:imgs="bannerImgs"v-show="showGallary"@close="handleGallaryClose"></common-gallary></fade-animation></div> </template><script> import CommonGallary from 'common/gallary/Gallary' import FadeAnimation from 'common/fade/FadeAnimation' export default {name: 'DetailBanner',props: {sightName: String,bannerImg: String,bannerImgs: Array},data () {return {showGallary: false}},methods: {handleBannerClick () {this.showGallary = true},handleGallaryClose () {this.showGallary = false}},components: {CommonGallary,FadeAnimation} } </script><style lang="stylus" scoped>.bannerposition: relativeoverflow: hiddenheight: 0padding-bottom: 55%.banner-imgwidth: 100%.banner-infodisplay: flexposition: absoluteleft: 0right: 0bottom: 0line-height: .6remcolor: #fffbackground-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)).banner-tittleflex: 1font-size: .32rempadding: 0 .2rem.banner-numberheight: .32remline-height: .32remmargin-top: .14rempadding: 0 .4remborder-radius: .2rembackground: rgba(0, 0, 0, .8)font-size: .24rem.banner-iconfont-size: .24rem </style>

Header.vue

<template><div><router-linktag="div"to="/"class="header-abs"v-show="showAbs"><div class="iconfont header-abs-back">&#xe624;</div></router-link><divclass="header-fixed"v-show="!showAbs":style="opacityStyle"><router-link to="/"><div class="iconfont header-fixed-back">&#xe624;</div></router-link>景點詳情</div></div> </template><script> export default {name: 'DetailHeader',data () {return {showAbs: true,opacityStyle: {opacity: 0}}},methods: {handleScroll () {const top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffsetif (top > 60) {let opacity = top / 140opacity = opacity > 1 ? 1 : opacitythis.opacityStyle = { opacity }this.showAbs = false} else {this.showAbs = true}}},mounted () {window.addEventListener('scroll', this.handleScroll)},destroyed () {window.removeEventListener('scroll', this.handleScroll)} } </script><style lang="stylus" scoped>@import '~styles/varibles.styl'.header-absposition: absoluteleft: .2remtop: .2remwidth: .8remheight: .8remline-height: .8remborder-radius: .4remtext-align: centerbackground: rgba(0, 0, 0, .8).header-abs-backcolor: #ffffont-size: .4rem.header-fixedz-index: 2position: fixedtop: 0left: 0right: 0height: $headerHeightline-height: $headerHeighttext-align: centercolor: #fffbackground: $bgColorfont-size: .32rem.header-fixed-backposition: absolutetop: 0left: 0width: .64remtext-align: centerfont-size: .4remcolor: #fff </style>

List.vue

<template><div><divclass="item"v-for="(item, index) of list":key="index"><div class="item-title border-bottom"><span class="item-title-icon"></span>{{item.title}}</div><div v-if="item.children" class="item-chilren"><detail-list :list="item.children"></detail-list></div></div></div> </template><script> export default {name: 'DetailList',props: {list: Array} } </script><style lang="stylus" scoped>.item-title-iconposition: relativeleft: .06remtop: .06remdisplay: inline-blockwidth: .36remheight: .36rembackground: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeatmargin-right: .1rembackground-size: .4rem 3rem.item-titleline-height: .8remfont-size: .32rempadding: 0 .2rem.item-chilrenpadding: 0 .2rem </style>

Detail.vue

<template><div><detail-banner:sightName="sightName":bannerImg="bannerImg":bannerImgs="gallaryImgs"></detail-banner><detail-header></detail-header><div class="content"><detail-list :list="list"></detail-list></div></div> </template><script> import DetailBanner from './components/Banner' import DetailHeader from './components/Header' import DetailList from './components/List' import axios from 'axios' export default {name: 'Detail',components: {DetailBanner,DetailHeader,DetailList},data () {return {sightName: '',bannerImg: '',gallaryImgs: [],list: []}},methods: {getDetailInfo () {axios.get('/api/detail.json', {params: {id: this.$route.params.id}}).then(this.handleGetDataSucc)},handleGetDataSucc (res) {res = res.dataif (res.ret && res.data) {const data = res.datathis.sightName = data.sightNamethis.bannerImg = data.bannerImgthis.gallaryImgs = data.gallaryImgsthis.list = data.categoryList}}},mounted () {this.getDetailInfo()} } </script><style lang="stylus" scoped>.contentheight: 50rem </style>

FadeAnimation.vue

<template><transition><slot></slot></transition> </template><script> export default {name: 'FadeAnimation' } </script><style lang="stylus" scoped>.v-enter, .v-leave-toopacity: 0.v-enter-active, .v-leave-activetransition: opacity .5s </style>

在config文件夾中index.js設置IP和端口，在手機訪問192.168.0.101:8080也成功訪問。

實現打包npm run build

代碼：https://gitee.com/MaoliRUNsen_admin/travel.git

本次的Vue去哪里兒項目就學習完成了。學了快近一個月。今天就記錄下。

總結

以上是生活随笔為你收集整理的七十四、完成Vue项目城市详细页，并实现打包的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。