vue仿站酷首页

1687878925984

学着通过vue脚手架制作站酷网站首页模块

首先是导航栏使用nav制作

例如发现板块，这里我制作了一个二级菜单：

<span><a href="https://www.zcool.com.cn/">首页</a></span>
            <span>
              <div class="dropdown">
                <a href="https://www.zcool.com.cn/discover">
                  <i class="point1"></i>
                  发现
                </a>
                <div class="dropdown-content">
                  <a href="#">精选</a>
                  <a href="#">平面</a>
                  <a href="#">UI</a>
                  <a href="#">网页</a>
                  <a href="#">插画</a>
                  <a href="#">动漫</a>
                  <a href="#">摄影</a>
                </div>
              </div>
            </span>

然后设置css样式

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  display: none;
  min-width: 150px;
  min-height: 50px;
  padding: 12px 16px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  border-radius: 12px;
}

.dropdown-content a {
  margin: 10px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

然后是轮播，使用了swiper组件，非常方便（我把swiper挂载在mounted上面使用）

    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="v in swiperArr" :key="v">
          <img :src="v" alt="" />
        </div>
      </div>
      <!-- 分页器 -->
      <!-- <div class="swiper-pagination"></div> -->

      <!-- 导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

      <!-- 滚动条 -->
      <div class="swiper-scrollbar"></div>
    </div>

 mounted() {
        new Swiper(".swiper", {
            // direction: "vertical", // 垂直切换选项
            loop: true,
            autoplay: true,
            // 如果需要分页器
            pagination: {
                el: ".swiper-pagination",
            },
        });
    },

之后使用tab，v-model绑定，v-for循环显示内容，例如首页推荐模块

 <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="首页推荐" name="one">
        <ul class="recommend-content">
          <li v-for="(v, i) in indexRecommendArr" :key="i">
            <img :src="v.img" alt="" />
            <div>
              <div class="left">
                <h3>{{ v.title }}</h3>
                <p>{{ v.name }}</p>
              </div>
              <div class="right">
                <img class="view" width="25" height="25" src="../assets/imgs/眼睛.png" alt="" />
                <span>{{ v.view }}</span>
              </div>
            </div>
          </li>
        </ul>
      </el-tab-pane>

其中的内容(图片和文字)使用mock和axios模拟虚拟数据

MockServe.js:
import Mock from 'mockjs'
import apiData from './data.json'

Mock.mock('/indexRecommendArr', { code: 0, data: apiData.indexRecommendArr })


data.json:
 "indexRecommendArr": [
        {
            "img": "https://img.zcool.cn/community/0313ddygzmg1bm74n8mkect3332.png?x-oss-process=image/resize,m_fill,w_520,h_390,limit_1/auto-orient,1/sharpen,100/quality,q_80/format,webp",
            "title": "看完这篇万字文章，你也能绘制用户体验地图",
            "view": "100",
            "name": "剪空气刘海的567"
        },
        {
            "img": "https://img.zcool.cn/community/0318vc7cvga35k5u5nvrdmk3637.png?x-oss-process=image/resize,m_fill,w_520,h_390,limit_1/auto-orient,1/sharpen,100/quality,q_80/format,webp",
            "title": "大话吉祥×新年礼盒",
            "view": "2859",
            "name": "無视免谈"
        },
        {
            "img": "https://img.zcool.cn/community/01505b64918f0a000f941000f614f9.jpg?x-oss-process=image/resize,m_fill,w_520,h_390,limit_1/auto-orient,1/sharpen,100/quality,q_80/format,webp",
            "title": "流水迢迢 概念海报",
            "view": "3779",
            "name": "鍾大年儿"
        },
        {
            "img": "https://img.zcool.cn/community/03155dndbpvrfgyxcnjrymn3435.png?x-oss-process=image/resize,m_fill,w_520,h_390,limit_1/auto-orient,1/sharpen,100/quality,q_80/format,webp",
            "title": "如何从0到1搭建互动游戏【视觉篇】",
            "view": "1923",
            "name": "继安Haivy"
        }

axios:
import Vue from 'vue'
import axios from 'axios'

const http = {
    install() {
        Vue.prototype.axios = axios;
    }
}
mock(/\/api\/ratings\/list/, 'post', ratings.list)

//在created里面获取数据
created() {
        this.$axios.get("/indexRecommendArr").then((res) => {
            this.indexRecommendArr = res.data.data;
        });

跳转的页面由路由实现

      <RouterLink to="/bk1"></RouterLink>
    <RouterView></RouterView>

在此基础上做了登录界面和换一换交互功能