前后端分离项目-前端

一、环境配置

vue create web

选择vue2.0 默认就行

cd web

安装sass, sass-loader

sass-loader版本太高会报错Syntax Error: TypeError: this.getOptions is not a function，安装低版本即可
npm uninstall --save sass-loader // 卸载
npm i -D sass-loader@8.x // 安装

npm i -D sass

工具样式概念

可复用性高，sass

在main.js中引用.scss文件

sass好处

可嵌套

.hello {
    h1 {
        color: red;
    }
}

重置样式

style.scss

// reset
* {
    box-sizing: border-box; // 盒子模型以边框为主
    outline: none;  // 取消高亮
}
html {
    font-size: 13px; // 做为基础像素
}
body {
    maring: 0;
    font-family: Arial,Helvetica,sans-serif;
    line-height: 1.2em; 
    background: #f1f1f1;
}
a {
    color: #999;
    
}

网站色彩和字体定义

先定义好常用的颜色

// colors 
$colors: (
	"primary": #db9e3f,
    "white": #fff,
    "light:" #f9f9f9,
    "grey": #999,
    "dark-1": #343440,
    "dark": #222,
     "black": #000, 
);
// 根据已有颜色生成对应文字的类
@each $colorKey,$color in $colors {
    .text-#{$colorKey} {
        color: $color;
    }
     .bg-#{$colorKey} {
        background-color: $color;
    }
}
// text
// @each表示循环
@each $var in (left,center,right){
    .text-#{$var} {
        text-align: $var;
    }
}

// font 像素应该用rem
// 换算工具 px to rem 
// alt+z 先alt+s 改变默认的13 
$base-font-size: 1rem;
$font-sizes: (
	xs: 0.7692, //10px
    sm: 0.9231,  // 12px
    md: 1 ,       // 13px
    lg: 1.0769,   // 14px
    xl: 1.2308, // 16px
);
@each $sizeKey,$size in $font-sizes {
    .fs-#{$sizeKey} {
        font-size: $size * $base-font-size;
    }
}

定义flex布局

// flex
.d-flex {
    display: flex;
}
.flex-columm {
    flex-direction: column;
}
$flex-jc: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-aroudn,
);
@each $key,$value in $flex-jc {
    .js-#{$key} {
        justify-content: $value;
    }
}
$flex-ai: (
    start: flex-start,
    end: flex-end,
    center: center,
    stretch: stretch
);
@each $key,$value in $flex-ai {
    .ai-#{$key} {
        align-items: $value;
    }
}
.flex-1 {
    flex: 1;
}
// 默认左边固定右边拉伸
.flex-grow-1 {
    flex-grow: 1;
}

justify-content属性

/* 对齐方式 */
justify-content: center; /* 居中排列 */
justify-content: start; /* 从行首开始排列 */
justify-content: end; /* 从行尾开始排列 */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end; /* 从行尾位置开始排列 */
justify-content: left; /* 一个挨一个在对齐容器得左边缘 */
justify-content: right; /* 元素以容器右边缘为基准，一个挨着一个对齐, */

/* 基线对齐 */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/* 分配弹性元素方式 */
justify-content: space-between; /* 均匀排列每个元素
首个元素放置于起点，末尾元素放置于终点 */
justify-content: space-around; /* 均匀排列每个元素
每个元素周围分配相同的空间 */
justify-content: space-evenly; /* 均匀排列每个元素
每个元素之间的间隔相等 */
justify-content: stretch; /* 均匀排列每个元素
‘auto’-sized 的元素会被拉伸以适应容器的大小 */

/* 溢出对齐方式 */
justify-content: safe center;
justify-content: unsafe center;

/* 全局值 */
justify-content: inherit;
justify-content: initial;
justify-content: unset;

常用边距定义

// spacing

$spacing-types: (m: margin, p:padding);
$spacing-directions: (t: top, r:right,b:buttom,l:left);
$spacing-base-size: 1rem
$spacing-sizes: (0: 0,1: 0.25,2 : 0.5, 3:1,4:1.5,5:3,);

@each $typeKey,$type in $spacing-types {
    // m-1
    @each $sizeKey,$size in $spacing-sizes {
            //.m-1{margin: 0,25rem}
            .#{$typeKey}-#{$sizeKey} {
                #{$type}: $size* $spacing-base-size;  
        	}
        }
// mx-1
    @each $sizeKey,$size in $spacing-sizes {
            
            .#{$typeKey}x-#{$sizeKey} {
                #{$type}-left: $size* $spacing-base-size;  
                #{$type}-right: $size* $spacing-base-size;
        	}
        }
// my-1
    @each $sizeKey,$size in $spacing-sizes {
          
            .#{$typeKey}x-#{$sizeKey} {
                #{$type}-top: $size* $spacing-base-size;  
                #{$type}-bottom: $size* $spacing-base-size;
        	}
        }
    // mt-1
    @each $directionKey,$direction in $spacing-directions{
        @each $sizeKey,$size in $spacing-sizes {
            //.mt-1{margin-top: 0,25rem}
            .#{$typeKey}#{$directionKey}-#{$sizeKey} {
                #{$type}-#{$direction}: $size* $spacing-base-size;  
        }
        }
    }
  
}

再main.js里引入

主页框架

vue add router

t

改造App.vue

router.js

// 新建一个主页组件
import Main

routes: [
    {
        path: '/',
        name: 'main',
        component: Main
        children: [
        	{path:'/' ,name:'home',component:Home}
        ]
    }
]

Main.vue

<div class="tapbar">
    
</div>
<div class="nav">
    
</div>
<router-view></router-view>

轮播图

vue-awesome-swiper

在main.js中全局引用

npmjs查看相关使用

swiperOptins:{autoplay: {delay: 2500,disableOnInteraction:false}}

精灵图

www.spritecow.com

帮助我们定位图片位置

字体图标

阿里巴巴矢量图标库

下载代码 放到项目中assert中(整套的，不能单个添加)

在main.js中引用

使用 点击下载代码的.html文件，里面有使用指南

卡片组件