</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> <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> <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> <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去哪里儿项目就学习完成了。学了快近一个月。今天就记录下。

总结

以上是凯发k8官方网为你收集整理的七十四、完成vue项目城市详细页，并实现打包的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。