Vue-cli搭建移动端项目

Vue-cli搭建移动端项目

项目介绍
1.仿照去哪儿 APP做的移动端项目
2.可以进行移动端的屏幕适配
3.使用Vue脚手架工具和webpack打包工具构建项目
4.使用预处理语言less编写部分css样式
5.使用iview框架实现轮播图效果以及各种图标的引用
6.使用Vuex以及Vuerouter实现组件与组件之间的通信
7.使用了axios技术请求数据资源

项目目录结构

组件目录

首页界面效果

• 搜索栏组件

<template>
<div id="pageHeader">
<div class="head-l"><Icon type="ios-arrow-back" id="backIcon"/></div>
<div>
<input type="text" class="head-c" placeholder="请输入景点/城市/游玩主题"></input>
</div>
<div class="head-r">
<!--
<router-link> 标签-->
<router-link to="/selCity">{{this.$store.state.city}}<Icon type="md-arrow-dropdown" id="dropIcon" />
</router-link>
</div>
</div>
</template>
<script>
export default({
name:'pageHeader',
data:function(){
return{
name:'去哪儿'
}
}
})
</script>

• 轮播图组件使用iview框架实现

<template>
<div id="banner">
<Carousel v-model="value1" loop :radius-dot="radiusDot" :autoplay="autoplay"
:autoplay-speed="autoplaySpeed">
<CarouselItem>
<img src="../common/images/banner1.jpg" alt="">
</CarouselItem>
<CarouselItem>
<img src="../common/images/banner2.jpg" alt="">
</CarouselItem>
<CarouselItem>
<img src="../common/images/banner3.jpg" alt="">
</CarouselItem>
<CarouselItem>
<img src="../common/images/banner4.jpg" alt="">
</CarouselItem>
</Carousel>
</div>
</template>
<script>
export default({
name:'banner',
data:function(){
return{
value1:0,
height:"100px",
radiusDot:true,
autoplay: true,
autoplaySpeed: 2000,
repara:'',
}
},
props:['para'],
mounted:function(){
console.log(this.para);
}
})
</script>
<style lang="less" scoped>
.h(@px){
height:unit(@px/37.5,rem);
}
.w(@px){
width:unit(@px/37.5,rem);
}
.marginTop(@top){
margin-top:unit(@top/37.5,rem);
}
#banner{
.w(375);
.h(100);
img{
.w(375);
.h(100);
}
}
</style>

• “猜你喜欢”组件使用axios发送请求并将获得的数据渲染进DOM层中
  

<template>
<div id="guessYouLike">
<div class="like-top">
<img src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="">
<span>猜你喜欢</span>
</div>
<div class="like-list">
<router-link :to="'/single/'+list.name" class="like-list-item" v-for="list in lists" tag="div">
<div class="left">
<img v-bind:src="list.img" class="picBig">
<div v-if="list.type==1">
<div class="picSmall-type1">随买随用</div>
</div>
<div v-else-if="list.type==2">
<div class="picSmall-type2">可定明日</div>
</div>
</div>
<div class="right">
<div class="desc">
<p class="name">{{list.name}}</p>
<p>
<span class="level">
<Rate allow-half disabled v-model="list.level" class="rate">
</Rate>
</span>
<span class="comment">{{list.commNum}}条评论</span>
</p>
<p class="price">￥<span class="priceCon">{{list.price}}</span>起</p>
</div>
<div class="area">{{list.address}}</div>
<div class="bottom">{{list.desc}}</div>
</div>
</router-link>
</div>
<div class="like-more">
<a href="#" title="">查看所有产品</a>
</div>
</div>
</template>
<script>
export default({
data:function(){
return{
valueCustomText:5,
lists:[],
}
},
mounted:function(){
var url="http://localhost:8080/static/guessyoulike.json"
this.$axios.get(url,{})
.then((res)=>{
//console.log(res);//此时得到的数据是经过拦截器初步处理过的
this.lists=res.data.guessyoulikeLists;
})
.catch((err)=>{
console.log(err);
})
}
})
</script>

• “周末去哪”组件使用axios发送请求并将获得的数据渲染进DOM层中
  

<template>
<div id="weekendGo">
<div class="weekend-title" ref="go">周末去哪儿</div>
<div class="weekend-list">
<div class="weekend-list-item" v-for="list in lists">
<a href="#">
<img v-bind:src="list.img" alt="">
<p class="item-topic">{{list.title}}</p>
<p class="item-desc">{{list.desc}}</p>
</a>
</div>
</div>
</div>
</template>
<script>
export default({
name:'weekengGo',
data:function(){
return{
message:'hello',
lists:[],
}
},
mounted:function(){
var url="http://localhost:8080/static/guessyoulike.json"
this.$axios.get(url,{})
.then((res)=>{
//console.log(res);//此时得到的数据是经过拦截器初步处理过的
this.lists=res.data.weekendgowhereLists;
})
.catch((err)=>{
console.log(err);
})
}
})
</script>

详情页面效果
- 点击“猜你喜欢”中的选项会跳转到详情界面。（使用Vuerouter来传参，通过this.$router.paramName来获取参数从而动态加载详情界面 ）

详情页代码主要是引入多个组件

<template>
<div id="single">
<singleBanner></singleBanner>
<weekRefereer></weekRefereer>
<activity></activity>
</div>
</template>
<script>
import singleBanner from 'components/singles/singleBanner.vue'
import weekRefereer from 'components/singles/weekReferee.vue'
import activity from 'components/singles/activity.vue'
export default({
name:'single',
components:{singleBanner,weekRefereer,activity},
mounted:function(){
},
//当从缓存中读取数据时触发该生命周期函数
activated:function(){
console.log(this.$route.params.sightName);
}
})
</script>

核心组件部分（使用keep-alive组件实现从缓存中读取数据）

//在APP.vue中添加<keep-alive>组件
<template>
<div id="app">
<!-- 从缓存中读取数据 -->
<keep-alive>
<router-view/><!-- 路由匹配到的组件将渲染在这里 -->
</keep-alive>
</div>
</template>

<template>
<div id="single">
<div class="single_title" ref="single_title">
<div
@click="sel(item)" class="title" v-for="item in selItems" :class=" item==activeItem?'active':'' ">{{item}}</div>
</div>
<div class="single_con">
<div class="single_con_item" v-for="item in achorLinks" :ref="item.name">
<div v-for="content1 in item.con">
<div class="itemTitle" >
<Icon type="ios-paper" id="ticketIcon" />
<span>{{content1.name2}}</span>
</div>
<div
v-for="content2 in content1.con">
<div class="itemTitle" @click="content2.state=!content2.state">
{{content2.name3}}
<span class="price">￥78</span>
<span v-if="!content2.state"><Icon type="ios-arrow-down" class="down" /></span>
<span v-else-if="content2.state"><Icon type="ios-arrow-up" class="down" /></span>
</div>
<div class="itemCon" v-if="content2.state">
<div class="weekList-item">
<div class="left">
<p class="ticket">天津方特欢乐世界成人夜场门票</p>
<p class="time"><img src="https://img1.qunarzz.com/piao/fusion/1804/25/792e9929973a9902.png" alt="">可定9月7日</p>
<span class="tip">条件退</span>
</div>
<div class="right">
<p class="price">￥<span class="priceCon">78</span></p>
<p class="order"><a href="#">预定</a></p>
</div>
</div>
<div class="weekList-item">
<div class="left">
<p class="ticket">天津方特欢乐世界成人夜场门票</p>
<p class="time"><img src="https://img1.qunarzz.com/piao/fusion/1804/25/792e9929973a9902.png" alt="">可定9月7日</p>
<span class="tip">条件退</span>
</div>
<div class="right">
<p class="price">￥<span class="priceCon">78</span></p>
<p class="order"><a href="#">预定</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <detailInfo :ticket="ticket"></detailInfo> -->
</div>
</template>
<script>
import detailInfo from 'components/singles/detail-info.vue'
export default({
name:'single',
data:function(){
return{
activeItem:'门票',
selItems:['门票','一日游','景区服务'],
ticket:[{name:'儿童票',children:[{name:'儿童半价票'},{name:'儿童全价票'}]},
{name:'成人票'},
{name:'学生票'}],
achorLinks:[{name:'门票',con:[{name2:'夜场',con:[{name3:'夜场成人票',state:false}]},{name2:'日场',con:[{name3:'儿童票',state:false},{name3:'大学生票',state:false},{name3:'成人票',state:false}]}]},{name:'一日游',con:[{name2:'一日游',con:[{name3:'【天津出发】方特欢乐世界一日游',state:false}]}]},{name:'景区服务',con:[{name2:'电子讲解',con:[{name3:'方特欢乐世界电子导游讲解',state:false}]}]}],
state:false,
}
},
components:{detailInfo},
methods:{
scrollChange:function(){
let top=document.documentElement.scrollTop;
let obj=this.$refs.single_title;
let offTop=this.$refs.single_title.offsetTop;
if(top>=offTop){
console.log(obj);
obj.className="single_title hello";
}else{
obj.className="single_title";
}
},
sel:function(item){
//console.log(item);
this.activeItem=item;
},
showChild:function(){
this.state=!this.state;
}
},
mounted:function(){
},
//当从缓存中读取数据时触发该生命周期函数
activated:function(){
window.addEventListener('scroll',this.scrollChange);
},
//当离开这个组件时撤销这个事件
deactivated:function(){
window.removeEventListener('scroll',this.scrollChange);
}
})
</script>

选择城市页面效果
点击字母按钮，页面自动跳转到相应字母开头的城市列表（使用锚点链接实现）
选中某个城市跳转回主界面，主界面右上角城市相应改变（使用Vuex实现）

选择城市并点击

城市改变

主界面中主要包含了多个组件

<template>
<div id="selcity">
<selCityHeader @toselCity="which"></selCityHeader>
<!-- <search></search> -->
<template v-if="isChina==true">
<chinaCity :sendData="message"></chinaCity>
</template>
<template v-else-if="isChina==false">
<forgeinCity></forgeinCity>
</template>
</div>
</template>
<script>
import selCityHeader from 'components/selCityHeader'
import chinaCity from 'components/chinaCity'
import forgeinCity from 'components/forgeinCity'
import search from 'components/search'
export default({
name:'selCity',
data:function(){
return{
isChina:true,
message:'hello to children',
inputCon:"",
}
},
components:{selCityHeader,chinaCity,forgeinCity,search},
methods:{
which:function(data){
//console.log(data);
if(data=='china'){
this.isChina=true;
}else if(data=='forgein'){
this.isChina=false;
}
}
},
watch:{
inputCon:function(val,oldval){
console.log(val);
}
}
})
</script>

核心组件（选择城市并跳转回主页面）

<template>
<div id="selCityCon">
<!-- 热门城市 -->
<div id="hotCity">
<h2>热门城市</h2>
<ul>
<li v-for="(city,index) in citys" :class="index % 3==1?'center':''" @click="goHome(city)">
<a href="#" title="">{{city}}</a>
</li>
</ul>
</div>
<div class="clearfix"></div>
<!-- 字母排序 -->
<div id="wordRank">
<h2>字母排序</h2>
<ul>
<li v-for="(word,index) in words">
<a :href="'#'+word" title="">{{word}}</a>
</li>
</ul>
</div>
<div class="clearfix"></div>
<!--
城市名称列表 -->
<div id="citylist">
<div class="citylist-item" v-for="city in citylist">
<h2 :id="city.word">{{city.word}}</h2>
<div class="citylist-item-content">
<ul>
<li v-for="(item,index) in city.con" :class="(index % 4==1 || index % 4==2 ||index % 4==0) ?'border-r':''">
<a href="#" title="">{{item}}</a>
</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</template>
<script>
export default({
name:'hotCity',
data:function(){
return{
citys:[],
words:['A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','W','X','Y','Z'],
citylist:[],
}
},
props:['sendData'],//用于接收父组件传递过来的数据
mounted:function(){
var url="http://localhost:8080/static/citylist.json"
this.$axios.get(url,{})
.then((res)=>{
//console.log(res);//此时得到的数据是经过拦截器初步处理过的
this.citylist=res.data.allcitys;
this.citys=res.data.hotcitys;
//console.log(res.data)
console.log(this.sendData);//访问父组件传过来的数据
})
.catch((err)=>{
console.log(err);
})
},
methods:{
goHome:function(name){
/*this.$store.commit('changecity',name)*/
this.$store.dispatch('acchange',name);
this.$router.push('/')
}
}
})
</script>

最后

以上就是难过水池为你收集整理的Vue-cli搭建移动端项目的全部内容，希望文章能够帮你解决Vue-cli搭建移动端项目所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。