Vue-cli搭建移动端项目

最新推荐文章于 2025-06-25 09:08:29 发布

原创

最新推荐文章于 2025-06-25 09:08:29 发布 · 4.5k 阅读

17 ·

CC 4.0 BY-SA版权

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"