7、Vue2(三) element-ui+less

18.element-ui

elementui：目前最主流的UI框架

UI框架-PC端：帮助我们快速搭建项目，element-ui(主要vue/react)、antd(ant design)(主要react/vue)、bootstrap(jquery)、layui(jquery)、easyui(jquery)

安装：

npm i element-ui

**使用：**在main.js文件中

import ElementUI from "element-ui";//1 引入element-ui框架
import 'element-ui/lib/theme-chalk/index.css';//2 引入样式文件
Vue.use(ElementUI);//3 注册

在使用的时候直接找到合适的样式复制html代码即可，也不用注册，它们就是一些已经封装好的组件，已经在全局注册了。

如果看到一个属性没有值，其实它的意思是他的属性值是布尔值，如round等同于round=“true”,而:round=“false”.

自己仿照element-ul自己封装一个button框架，之后可以按照这种自己封装UI框架：

<!-- GaoButton.vue -->
<template>
    <div>
        <div class="btn" :style="{ backgroundColor: bgc, borderRadius: bd }">
           <!-- <span v-if="$slots.default"> -->
                <slot></slot>
          <!--  </span> -->
            <!-- $slots的内容是default，如果插槽中有内容，$slots.default返回的是一个数组，如果插槽中没有内容，$slots.default返回undefined，在逻辑判断在中undefined等同于false -->
        </div>
    </div>
</template>

<script>
export default {
    // props: ["type", "round"],
    props: {
        type: String,
        round: Boolean,
    },
    computed: {
        bgc() {
            if (this.type == "success") {
                return "green";
            } else if (this.type == "danger") {
                return "red";
            } else {
                return "gray";
            }
        },
        bd() {
            return this.round ? "20px" : "5px";
        },
    },
};
</script>

<style scoped>
.btn {
    display: inline-block;
    border-radius: 5px;
    background-color: greenyellow;
    padding: 5px 10px;
    color: #fff;
}
</style>

<!-- 使用gao-button组件  需要引入、注册 -->
<gao-button type="danger" round>我是可更改的按钮</gao-button>

19.Less

什么是less

常见的CSS预处理器：Sass/Scss(发展后的)、Less、Stylus

LESS是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。 LESS是一种动态样式表语言，扩展了CSS的功能。 LESS也是跨浏览器友好。

CSS预处理器是一种脚本语言，可扩展CSS并将其编译为常规CSS语法，以便可以通过Web浏览器读取。 它提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS。

中文官网：

https://less.bootcss.com/

安装：

npm install -g less

Less的编译

Less只是编写CSS的一种过渡的代码而已，部署的时候还是要转为CSS，转为CSS才能被浏览器识别。

编写Less代码时新建一个.less的文件，在里面编写Less代码。

在html中<link rel="stylesheet" href="./less/test.less">引入时直接引入.less文件浏览器是无法识别的，需要把Less代码转为CSS代码，再将CSS代码引入到html文件中。

那么如何将Less代码转为CSS代码呢？

方法一：下载Node环境，通过npm包管理下载less工具，使用less工具对代码进行编译；-----在项目中实际使用的

方法二：使用VSCode插件(Easy Less)或者在线编译https://lesscss.org/less-preview，------会生成一个同名的.css文件，还未学习框架的脚手架阶段时可以使用，学了脚手架就不用了

方法三：引入CDN的less编译代码，对less进行实时的处理。-----------这样可以直接引入.less文件，通过CDN的js代码将less转为css，coderwhy老师目前上课所用的方法

<link rel="stylesheet/less" href="./less/test.less">
<script src="https://cdn.jsdelivr.net/npm/less@4"></script

方法四：将less编译的js代码下载到本地，执行js代码对less进行编译。

嵌套规则

假设我们有如下css代码

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

用 Less 语言我们可以这样书写代码：

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

用 Less 书写的代码更加简洁，并且模仿了 HTML 的组织结构。

但是用了这种嵌套我们会发现，hover这种伪类不会写了

比如之前 使用伪类选中元素的某种特殊的状态

.box:hover{background:red}

less中提供了 & 表示当前选择器的父级，可以理解为所在选择器的名称

.box{
  &:hover{background:red}
}

.list{
    .item{
        &:hover{
			color:@mainColor;
        }
        &:first-child{
            color:blue;
        }
        &:nth-child(2){
			color:red;
        }
    }
}

变量

Less变量其实就是将属性值提前存储到一个容器中，然后我们可以在书写Less中调用它.

可以将常见的颜色和字体等定义为变量来使用。

语法

定义变量： @变量名:值;

使用调用变量: CSS属性：@变量名

案例：

@number:brown;
div{
    width: (100 / 2px);
    height: 100 * 2px;
    background-color: @number;
    &:hover{
        background-color: aqua;
    }
}

运算

原始CSS中，我们给元素宽高等等的时候，我们只能给到一个确切的值，使用Less我们可以进行算法：

任何数字、颜色或者变量都可以参与运算

注意除法运算的时候要整体套括号

div{width:(100/2px)}
border: (@width * 2) solid black;
color: #888 / 4;

• 对于两个不同单位值之间的运算，不要求你进行运算操作的几个值必须带单位，只要其中有一个有单位就可以了，运算结果的值会优先取第一个值的单位为准。
• 如果两个值之间只有一个值有单位，则运算结果就取该单位。
• 可以使用()小括号来添加一些更复杂的运算操作。在对颜色进行运算时，会忽略颜色值前面的#号。
• 算术运算符在加、减或比较之前会进行单位换算。
• 乘法和除法不作单位的转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而CSS是不支持指定区域的。

很笨，只有在特殊场景下，像 em to px 这种情况下才会用到运算，其他时候很少用到。

混合(Mixins)

如果有些样式希望可以重用，可以直接像下面这样直接输入所需的类即可

在实际的开发中，一般在less文件夹中单独新建一个 mixins.less 文件用来存放混合。

注意：混入在没有参数的情况下，小括号可以省略，但是不建议这样使用。

.large{
  font-size: 50px;
}

.box{
  h1{color:red}
  // 混入
  .large()
}

/*
	转化为CSS
	.large {
    	font-size: 50px;
    }
    .box {
    	font-size: 50px;
    }
    .box h1 {
    	color: red;
    }
*/

混入是可以传参数的。

// 定义混入时把需要改变的属性用变量表示，可以给参数设置默认值
.box_border(@borderWidth: 5px, @borderColor: purple) {
	border: @borderWidth solid @borderColor;
}
.box1 {
    width: 100px;
    height: 100px;
    // 混入传参
    .box_border(10px, orange)
}
.box2 {
    width: 200px;
    height: 200px;
    // 混入未传参，使用默认值
	.box_border()    
}

混入和映射结合使用。

作用：可以弥补less中不能自定义函数的缺陷。 例如 pxToRem函数的编写

.box_size {
	width:100px;
    height:100px;
}
.box1 {
    // box1的宽度想要使用box_size的宽度，先.box_size()拿到整个对象，再使用对象的key
    width: .box_size()[width];
    height:200px;
}

继承(Extend)

继承和混入mixins作用类似，用于复用代码，和Mixins相比，继承代码最终会转化成并集选择器。

/* 混入minxis */
.box_border {
	border: 5px solid red;
}
.box {
    width: 100px;
    height: 100px;
    .box_border()
}
/* 混入转化为CSS */
.box_border {
  border: 5px solid red;
}
.box {
  width: 100px;
  height: 100px;
  border: 5px solid red;
}

/* 继承extend */
.box_border {
	border: 5px solid red;
}
.box {
    width: 100px;
    height: 100px;
    &:extend(.box_border);
}
/* 继承转化为CSS */
.box_border,
.box {
  border: 5px solid red;
}
.box {
  width: 100px;
  height: 100px;
}

在实际的开发中，还是使用混入更加多一些，使用混入更加灵活简洁，

函数(Functions)

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等

less函数手册https://less.bootcss.com/functions/

函数的用法非常简单。下面这个例子将介绍如何利用 percentage 函数将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等用法：

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

作用域(scope)

在查找一个变量时，首先在本地和混入查找变量，如果找找不到，则从“父”级作用域继承。

@mainColor: red;
.box {
    @mainColor: blue;
    .item {
        @mainColor: yellow;
        span {
            color: @mainColor; /* 最终是离得最近的yellow */
        }
    }
}

注释(comment)

在less中，块注释和行注释都可以使用.

// /**/

导入

@import "library"; // library.less
@import "typo.css";