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

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

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布局的具体使用详解参考文章：www.jianshu.com/p/d9373a86b…

按钮定义

边距定义

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图片

使用在线图片定位工具：www.spritecow.com/，该工具可以获取一张大…

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

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

使用图标方式：查看html文件，查看图标类名，直接在需要使用的地方引入该图标的类名
```
  
复制代码
```

主页框架

顶部提示条


    
  
     王者荣耀
     团队成就更多
   
   
  
复制代码

导航栏

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组件中引用：

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（是否有“更多”的图标可供用户点击）

4 列表卡片组件

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

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

 
       
        
          {{category.name}}
        
      
      
        
        
            
        
        
      
   
复制代码

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


    
  
  
复制代码

5 其他细节问题

px转rem工具

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