全栈开发学习(Node+Vue+Mongodb)(八)——移动端页面搭建（主页部分）

2023-10-27

前面我们完成了后台管理界面的基本功能，接下来就需要完成移动端页面的搭建与数据的展示。移动端的搭建主要以旧版王者荣耀官网主页样式为模板，本文主要介绍前端搭建的流程与一些基本组件的使用。

1 准备工作

样式

思路：使用SASS规范化我们的所有样式，安装：npm i -D sass sass-loader，并且将所有样式相关的内容放在style.scss中，再在main.js中应用

样式重置

/*reset*/
*{
    box-sizing:border-box;
    outline: none;
 }
html{
    font-size: 13px;
}
body{
    margin:0;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.2em;
    background: #f1f1f1;
}
a{
    color: #999;
}
p{
    line-height: 1.5em;
}

色彩定义：主要分为字体颜色、背景颜色和边框色

先定义好颜色变量

$colors:(
    "primary":#db9e3f,
    "white":#fff,
   ...............
);

$border-color:map-get($colors, 'light-1' );  //边框色
@each $colorKey,$color in $colors{
    .text-#{$colorKey}{   //字体颜色
        color:$color ;
    }
    .bg-#{$colorKey}{     //背景色
        background-color:$color;
    }
}

字体定义

对齐方式

//text-align
@each $var in (left,center,right){
    .text-#{$var}{
        text-align: $var !important;
    }
}

字号

@each $sizekey, $size in $font-sizes {
    .fs-#{$sizekey} {
     font-size: $size * $base-font-size;
    }
  }

文字溢出

//text-overflow
.text-ellipsis{
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;  //不要换行
}

边框定义

//borders
@each $dir in(top,right,bottom,left){
    .border-#{$dir}{
        border-#{$dir}:1px solid $border-color;
    }
}

通用flex布局定义

设置弹性布局
```
.d-flex{
    display: flex;
}
```

设置容器内元素的排列方向

.flex-column{
    flex-direction: column; //垂直排列
}

设置容器内元素的换行

.flex-wrap{
    flex-wrap: wrap; //元素换行
}

设置元素在主轴（页面）上的排列

@each $key, $value in $flex-jc {
  .jc-#{$key} {
    justify-content: $value;
  }
}

设置元素在主轴（页面）当前行的横轴（纵轴）方向上的对齐方式

@each $key,$value in $flex-ai{
    .ai-#{$key}{
        align-items: $value;
    }
}

设置自动拉伸

.flex-1{
    flex:1;
}
.flex-grow-1{
    flex-grow: 1;
}

flex布局的具体使用详解参考文章：https://www.jianshu.com/p/d9373a86b748/

按钮定义

边距定义

margin

@each $typeKey,$type in $spacing-types {
    //margin
    @each $directionKey,$direction in $spacing-directions{
        @each $sizeKey,$size in $spacing-sizes {
             .#{$typeKey}-#{$sizeKey}{
                #{$type}:$size*$spacing-base-size;
             }
            }
        }
     //margin-x,margin-y
        @each $sizeKey,$size in $spacing-sizes {
             .#{$typeKey}x-#{$sizeKey}{
                #{$type}-left:$size*$spacing-base-size;
                #{$type}-right:$size*$spacing-base-size;
             }
             .#{$typeKey}y-#{$sizeKey}{
                #{$type}-top:$size*$spacing-base-size;
                #{$type}-bottom:$size*$spacing-base-size;
             }
            }

    //margin-top
    @each $directionKey,$direction in $spacing-directions{
        @each $sizeKey,$size in $spacing-sizes {
             .#{$typeKey}#{$directionKey}-#{$sizeKey}{
                #{$type}-#{$direction}:$size*$spacing-base-size;
             }
            }
        }
}

padding 同上，只不过修改了$spacing-types为p

sprite图片

使用在线图片定位工具：http://www.spritecow.com/，该工具可以获取一张大图中每个小图的位置信息

根据获得色对图片的定义如下所示：
```
&.sprite-news{
        width: 23px;
        height: 20px;
        background-position: 63.546% 15.517% ;
    }
```
iconfont字体图标

在使用iconfont图标库里的图标时，将选用的图标集合下载，解压下载的文件夹并移入web/assets中

使用图标方式：查看html文件，查看图标类名，直接在需要使用的地方引入该图标的类名
```
  <div class="iconfont icon-back text-blue-light" @click="$router.push('/')"></div>
```

主页框架

顶部提示条

<div class="topbar bg-black py-2 px-3 d-flex ai-center" >
    <img src="../assets/images/logo.jpg" height="30">
  <div class="px-2 flex-1">
     <div class="text-white">王者荣耀</div>
     <div class="text-dark-1 fs-xs">团队成就更多</div>
   </div>
   <button type="button" class="btn bg-primary">立即下载</button>
  </div>

导航栏

<div class="bg-primary pt-3 pb-2">
    <div class="nav d-flex text-white jc-around pb-1" >
      <div class="nav-item active">
       <router-link to="/" class="nav-link" tag="div">首页</router-link>
      </div>
      <div class="nav-item">
       <router-link to="/" class="nav-link" tag="div">攻略中心</router-link>
      </div>
      <div class="nav-item">
       <router-link to="/" class="nav-link" tag="div">赛事中心</router-link>
      </div>
    </div>
  </div>

2 轮播图组件

安装：github上搜索vue-swiper，执行 npm install vue-awesome-swiper --save

全局引用与使用：

//swiper组件
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'  //引用样式
Vue.use(VueAwesomeSwiper, /* { default global options } */)

在Home组件中引用：

<swiper :options="swiperOption">
      <swiper-slide>
        <img class="w-100" src="../assets/images/b9905b35bb0afa9050d9ddbe04d82d29.jpeg">
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/images/210794580bb9303653804bb7b482f2a4.jpeg">
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/images/ddc8c8922cbb694dfb73c86bb03fce22.jpeg">
      </swiper-slide>
    <div class="swiper-pagination pagination-home text-right px-3 pb-2" 
    slot="pagination"></div>
   </swiper>

data(){
        return{
             swiperOption: {
               pagination: {
               el: '.swiper-pagination'
              }
           }, 
            newsCats:[],
            heroCats:[],
        }
    },

小圆点的样式可以在该组件的样式下进行自定义

3 卡片组件

卡片组件在移动端使用得非常频繁，我们可以根据需求自定义组件的封装，给其他卡片组件作为一个公共的组件来复用。

定义全局组件，之后可以用m-card标签对其进行引用：

//card
import Card from './components/Card.vue'
Vue.component('m-card',Card)//定义全局组件

卡片组件的元素组成(可根据不同情况传入不同的参数达到复用的效果)：

title（组件标题）
icon(组件图标)
plain（是否有“更多”的图标可供用户点击）

<div class="card bg-white p-3 mt-3 pb-3">
        <div class="card-header d-flex ai-center fs-lg "
         :class="{'border-bottom': !plain, 'pb-3': !plain}">
        <div class="border-bottom" v-if="!plain"></div>
            <i class="iconfont" :class="`icon-${icon}`"></i>
            <div class="fx-xl flex-1 px-2"><strong>{{title}}</strong></div>
            <i class="iconfont icon-menu1" v-if="!plain"></i>
        </div>
        <div class="card-body pt-3">
            <slot></slot>
        </div>
    </div>

4 列表卡片组件

列表卡片组件实际上就是在空白的卡片组件上进行一个扩展，其内部包含了m-card组件。同样也要对其进行全局的定义。

该组件具体的定义结构如下（此结构包含导航栏和列表轮播）：

 <m-card :icon="icon" :title="title" >
       <div class="nav1 nav  jc-between">
        <div class="nav-item" :class="{active:active === i}"
        v-for="(category,i) in categories" :key="i"
        @click="$refs.list.swiper.slideTo(i)">
          <div class="nav-link">{{category.name}}</div>
        </div>
      </div>
      <div class="pt-3">
        <swiper ref="list"  :options="{autoHeight:true}" @slide-change="()=>active=$refs.list.swiper.realIndex">
        <swiper-slide v-for="(category,i) in categories" :key="i">
            <slot name="items" :category="category"></slot>
        </swiper-slide>
        </swiper>
      </div>
   </m-card>

在Main.vue中我们这样使用(其中包含可以点击跳转的文章列表链接，文章数据从后台获取)：

<m-list-card icon="menu" title="新闻资讯" :categories="newsCats">
    <template #items="{category}">
      <router-link 
        tag="div"
        :to="`/articles/${news._id}`"
         class="py-2 d-flex" 
         v-for="(news,i) in category.newsList" :key="i">
            <span class="text-blue">[{{news.categoryName}}]</span>
            <span class="px-2">|</span>
            <span class="flex-1 text-dark-1 text-ellipsis pr-2">{{news.title}}</span>
            <span class="text-grey ">{{news.createdAt | date}}</span>
      </router-link>
    </template>
  </m-list-card>
  <!--end if 新闻资讯-->

5 其他细节问题

px转rem工具

在扩展程序中搜索px to rem,安装; 安装完成后可以设置的默认字体大小，之后选中具体的数值，alt+z可转换为rem格式

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

全栈学习

javascript

vue

nodejs

vuejs