【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记（3.6-3.10）
本项目是 学习Bilibili 全栈之巅 视频教程相关源码和体会
/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><imgclass="w-100"src="../assets/images/201.jpeg"alt=""sizes=""srcset=""/></swiper-slide><swiper-slide><imgclass="w-100"src="../assets/images/202.jpeg"alt=""sizes=""srcset=""/></swiper-slide><divclass="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-blockdisplay: inline-block;// 网站 可以自动定位雪碧图&.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;}}
// 精灵图的收起和展开<divclass="bg-light py-2 fs-sm;"style="width: 100%"@click="switchActive"><iclass="sprite sprite-arrow mr-1":style="{ transform: isCollapse ? 'rotate(180deg)' : '' }"></i><span class="retract">{{isCollapse ? '收起' : '展开' }}</span></div>
3.9 web页面字体图标
/ 选择图标，下载代码压缩包，解压之
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.jsimport Card from './components/Card.vue'ponent('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 /srcimport Card from '../components/Card';export default {name: 'Home',components: {'m-card': Card },...
