【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记（3.6-3.10）

【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记（3.6-3.10）

本项目是 学习Bilibili 全栈之巅 视频教程相关源码和体会
https://gitee.com/blaunicorn/node-vue-wangzherongyao
持续更新中…

3.6 web页面主页框架和顶部菜单

vue add router //增加路由

// web\src\views\Main.vue
<template>
  <div>
    <div class="topbar bg-black py-2 text-white px-3 d-flex ai-center">
      <img src="../assets/logo.png" height="30" alt="" sizes="" srcset="" />
      <!-- 用flex-1去占据全部的剩余空间 -->
      <div class="px-2 flex-1">
        <div class="text-white">王者荣耀</div>
        <div class="text-dark-1">团队成就更多</div>
      </div>
      <button type="button" class="btn bg-primary jc-end">立即下载</button>
    </div>
    <div class="bg-primary pt-3 pb-2">
      <!-- 增加反色nav-inverse,去掉d-flex text-white -->
      <div class="nav nav-inverse jc-around pb-1">
        <div class="nav-item active">
          <router-link class="nav-link" to="/" tag="div">首页</router-link>
        </div>
        <div class="nav-item">
          <router-link class="nav-link" to="/about" tag="div"
            >攻略中心</router-link
          >
        </div>
        <div class="nav-item">
          <router-link class="nav-link" to="/" tag="div">赛事中心</router-link>
        </div>
      </div>
    </div>
    <!-- 所有子路由入口 -->
    <router-view></router-view>
  </div>
</template>

<script>
  export default {};
</script>

<style>
</style>

3.7 web页面swiper

npm install vue-awesome-swiper --save
// web\src\views\Home.vue
// template
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>
        <img
          class="w-100"
          src="../assets/images/201.jpeg"
          alt=""
          sizes=""
          srcset=""
        />
      </swiper-slide>
      <swiper-slide>
        <img
          class="w-100"
          src="../assets/images/202.jpeg"
          alt=""
          sizes=""
          srcset=""
        />
      </swiper-slide>
      <div
        class="swiper-pagination pagination-home text-right px-3 pb-2"
        slot="pagination"
      ></div>
    </swiper>
    ...
// js
// 自动播放 点击选择
        swiperOptions: {
          slidesPerView: 1,
          autoplay: {
            disableOnInteraction: false,
            delay: 1000,
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },

3.8 web页面使用精灵图

// sprite 
// web\src\style\index.scss
.sprite {
    background: url(../assets/images/index.png) no-repeat 0 0;
    // 一般双倍像素设计
    background-size: 28.846154rem;
    // 要设置宽高必须用 inline-block
    display: inline-block;
    // spritecow.com网站 可以自动定位雪碧图
    &.sprite-news {
    width: 1.769231rem;
	height: 1.538462rem;
    background-position: 63.546% 15.517%;
    }
    &.sprite-arrow {
    width: .769231rem;
	height: .769231rem;
    background-position: 38.577% 52.076%;
    }
    &.sprite-news {
    width: 1.769231rem;
	height: 1.538462rem;
    background-position: 63.546% 15.517%;
    }
    &.sprite-practice {
    width: 1.7692rem;
    height: 1.5385rem;
    background-position: 90.483% 15.614%;
  }
  &.sprite-affair {
    background-position: 36.746% 0.924%;
    width: 1.4615rem;
    height: 1.6923rem;
  }
  &.sprite-mall {
    background-position: 10.408% 15.517%;
    width: 1.5385rem;
    height: 1.5385rem;
    border: none;
  }
  &.sprite-start {
    background-position: 89.733% 1.266%;
    width: 1.5385rem;
    height: 1.6154rem;
  }
  &.sprite-honour {
    background-position: 36.467% 15.287%;
    width: 1.8462rem;
    height: 1.5385rem;
  }
  &.sprite-community {
    background-position: 9.728% 1.266%;
    width: 2rem;
    height: 1.6154rem;
  }
  &.sprite-base {
    margin-top: -3px;
    background-position: 63.3% 0.927%;
    width: 1.8462rem;
    height: 1.8462rem;
  }
  &.sprite-echart {
    background-position: 0 96.207%;
    width: 1.8462rem;
    height: 1.5385rem;
  }
  &.sprite-edition {
    background: url(../assets/images/version-icon.png) no-repeat -1px 0px;
    background-size: 100% 100%;
    width: 1.8462rem;
    height: 1.8462rem;
  }
}

// 精灵图的收起和展开
        <div
          class="bg-light py-2 fs-sm;"
          style="width: 100%"
          @click="switchActive"
        >
          <i
            class="sprite sprite-arrow mr-1"
            :style="{ transform: isCollapse ? 'rotate(180deg)' : '' }"
          ></i>
          <span class="retract">{{ isCollapse ? '收起' : '展开' }}</span>
        </div>

3.9 web页面字体图标

https://www.iconfont.cn/ 选择图标，下载代码压缩包，解压之

import './assets/iconfont/iconfont.css'
<i class="iconfont icon-news text-primary"></i>

3.10 web页面卡片容器并调整为组件字体图标

所有的新闻资讯、英雄列表都可以变成一个卡片包装

// web\src\main.js 全局引入，也可局部引入

import './assets/iconfont/iconfont.css'

<i class="iconfont icon-news text-primary"></i>

// components/Card.vue
<template>
  <div class="card mt-3 p-3 bg-white">
    <div class="card-header d-flex ai-center pb-3">
      <i class="iconfont" :class="`icon-${icon}`" style="color: deeppink"></i>
      <div class="fs-xl flex-1 px-2">{{ title }}</div>
      <i class="iconfont icon-menu"></i>
    </div>
    <div class="card-body pt-3">
      <!-- 使用插槽功能,展示父组件的内容 -->
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    // 父子组件传值
    props: {
      title: {
        type: String,
        required: true,
        default: '',
      },
      icon: {
        type: String,
        required: true,
        default: '',
      },
    },
  };
</script>

<style lang="scss">
  @import '../style/_variables.scss';
  .card {
    border-bottom: 1px solid $border-color;
    .card-header {
      border-bottom: 1px solid $border-color;
    }
  }
</style>

card组件的引入，有两种方式，全局引入、局部引入

// 如果全局引用组件
// web\src\main.js
import Card from './components/Card.vue'
Vue.component('a-card', Card)

// 如果局部引入组件
// web\src\views\Home.vue
</template>
  <div>
    <a-card icon="caidananniudianji" title="新闻资讯-全局组件"></a-card>
    <m-card icon="caidananniudianji" title="图文攻略"></m-card>
  </div>
</template>
<script>
  // @ is an alias to /src
  import Card from '../components/Card';
  export default {
    name: 'Home',
    components: { 'm-card': Card },
    ...