穷游网页 vue

Vue 框 ui 库

vant 库 -- 移动端 **

Mint UI

Antd vue官网：https://www.antdv.com/docs/vue/introduce-cn

element-ui -- pc 后台 **

Element-ui 库

安装 vue/cli 脚手架vue add element

基本使用

1 项目安装依赖

Vue 全家桶 vue + vue-router + vuex + axios +Element

项目初始化 css normalize.css

npm i normalize.css -S
import 'normalize.css'

vue add element

扫描二维码关注公众号，回复： 17223590 查看本文章

npm i axios -S

5 引入基础样式

/* 导入iconfont */
@import url('http://at.alicdn.com/t/c/font_3792124_p0cmgbsjbol.css');
html,body,#app{
    height: 100%;
  }
a{
    text-decoration: none;
}
ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
em{
    font-style: normal;
}
dl,dd{
    padding:0;
    margin: 0;
}

6 安装less

npm install [email protected]
npm install [email protected]
12

使用

<style lang="less" scoped></style>

2 首页制作

2.1 创建组件

配置出口：

二级路由出口

一极路由出口

2.2 引入

再mainjs中引入 elemt.js

2.4 编写头部

1 抽取组件

2.5 swiper 轮播

1 方法一：

 <el-carousel height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small">{
    
    { item }}</h3>
      </el-carousel-item>
    </el-carousel>

代码：

高度有点短，进行设置

图片上有字：用绝对定位定在里边

<template>
  <div>
    <el-carousel arrow="always" class="carousel">
      <el-carousel-item>
        <img src="@/assets/images/banner1.jpg" alt="" />
        <div class="title">
          旅游胜地
        </div>
      </el-carousel-item>
      <el-carousel-item>
        <img src="@/assets/images/banner2.jpg" alt="" />
      </el-carousel-item>
      <el-carousel-item>
        <img src="@/assets/images/banner3.jpg" alt="" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: 'bBanner'
}
</script>

<style scoped lang="less">
/deep/ .el-carousel__container {
  height: 600px;
}
</style>

2 方法二：

参考网址：https://github.com/surmon-china/vue-awesome-swiper

注意是vue2 还是vue3 的

使用步骤：

安装： npm install [email protected] [email protected] --save

安装两个，我们安装的swiper 5的版本

main.js 导入文件

   import VueAwesomeSwiper from'vue-awesome-swiper'
   import 'swiper/css/swiper.css'
   Vue.use(VueAwesomeSwiper)

组件使用

<template>
  <swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

参数配置

具体看官网：

<script>
export default {
    name: 'carrousel',
    data() {
    return {
        swiperOptions: {
        pagination: {
            el: '.swiper-pagination'
        },
        // Some Swiper option/callback...
        }
    }
    },
    computed: {
      swiper() {
          returnthis.$refs.mySwiper.$swiper
      }
    },
    mounted() {
      console.log('Current Swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
    }
}
</script>

代码：

<template>
    <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide>
            <img src="@/assets/images/banner1.jpg" width="100%" alt="">
        </swiper-slide>
        <swiper-slide>
            <img src="@/assets/images/banner2.jpg" width="100%" alt="">
        </swiper-slide>
        <swiper-slide>
            <img src="@/assets/images/banner3.jpg" width="100%" alt="">
        </swiper-slide>
        <!-- 轮播点 -->
        <div class="swiper-pagination" slot="pagination"></div>
        <!--  -->
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
</template>

<script>
export default {
    data() {
        return {
            swiperOptions: {//swiper配置信息
                //分页器
                pagination: {
                    el: '.swiper-pagination'
                },
                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                //自动轮播
                loop: true,
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                }
            }
        }
    }
}
</script>

<style>

</style>

2.6 搜索框

1 css样式

   <!-- 搜索框效果：
                    1. 聚焦显示热门城市
                    2. 失去焦点热门城市隐藏
                    3. 输入内容 显示搜索列表  热门城市隐藏
                    4. 输入内容 又删除--输入的值为空 搜索列表隐藏  热门城市显示
                    5. 输入的值存在 失去焦点 隐藏搜索列表
                    6. 输入的值存在 聚焦     显示搜索列表
              -->

2.7 今日推荐

注意：

1 v-htmll展示带html的数据

2 不同类型显示不同数据的写法

        <div class="bottom">
                    <template v-if="item.type == 'video'">
                      <span class="fr">{
    
    { item.data.tag }}</span>
                      <span class="f14">{
    
    { item.data.desc }}</span>
                    </template>
                    <template v-else-if="item.type == 'bbs'">
                      <span class="fr">{
    
    { item.data.views }}人浏览过</span>
                      <span class="f14">{
    
    { item.data.username }}</span>
                    </template>
                    <template v-else>
                      <!-- 指令：{
    
    { }} v-text=''  v-html='变量' -->
                      <span class="fr money" v-html="item.data.price"></span>
                      <span class="f14">{
    
    { item.data.start_pos }}</span>
                    </template>
                  </div>

2.8 穷游

展示数据：

父传子

2 换一换

page +1 重新调用接口

子传父

2.9 热门游记与话题

使用轮播图进行展示：

返回应该是一个【二维数组】：

代码：

2 注意 swipper他的高度太短，设置一下

.el-carousel__container{
  height: 630px;
}

3 发现好多文字超出两行的，需要进行设置

  .info {
          font-size: 16px;
          height: 48px;
          line-height: 24px;
          overflow: hidden;
        }

省略号写法：

         line-height: 24px;
          max-height: 48px;
          display: -webkit-box;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;

参考：

文字两行超出省略号_文本溢出显示省略号方案总结