7、Vue2(三) element-ui+less

Yjing景2024-10-22 17:08

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文件中

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框架：

vue 复制代码 
<!-- 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/

安装：

ba 复制代码 
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老师目前上课所用的方法

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

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

嵌套规则

假设我们有如下css代码

css 复制代码 
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

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

less 复制代码 
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

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

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

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

css 复制代码 
.box:hover{background:red}

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

less 复制代码 
.box{
  &:hover{background:red}
}

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

变量

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

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

语法

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

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

案例：

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

运算

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

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

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

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

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

混合(Mixins)

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

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

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

less 复制代码 
.large{
  font-size: 50px;
}

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

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

混入是可以传参数的。

js 复制代码 
// 定义混入时把需要改变的属性用变量表示，可以给参数设置默认值
.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函数的编写

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

继承(Extend)

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

less 复制代码 
/* 混入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 等用法：

less 复制代码 
@base: #f04615;
@width: 0.5;

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

作用域(scope)

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

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

注释(comment)

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

// /**/

导入

less 复制代码 
@import "library"; // library.less
@import "typo.css";
相关推荐
cc蒲公英3 天前
less和sass区别
前端·less·sass
小明记账簿3 天前
利用 Less 循环高效生成多组 CSS 间距工具类
前端·css·less
juma90029 天前
基于 Xilinx K7 325t 的千兆网 UDP 协议实现小记
less
小书包酱11 天前
告别在 vue 中使用公共 less 文件没有提示信息的烦恼
css·vue.js·less
abiao19811 个月前
VUE style标签中添加lang=less属性
前端·vue.js·less
IT从业者张某某1 个月前
less 工具 OpenHarmony PC适配实践
前端·microsoft·less
qq_415216251 个月前
vue3搭建项目yarn+vue3+webpack+less+element-plus
前端·webpack·less
NPE~1 个月前
[Linux命令分享]日志查看 — — less
linux·运维·less·常用命令·日志查看
泷羽Sec-静安1 个月前
Less-9 GET-Blind-Time based-Single Quotes
服务器·前端·数据库·sql·web安全·less
lang201509281 个月前
Linux命令行：cat、more、less终极指南
linux·chrome·less
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03【AutoGLM部署】本地私有化部署AI手机Agent04【超详细教程】手把手教你从微软官网免费下载Windows 10官方原版ISO镜像（2025最新版）05Linux下V2Ray安装配置指南06Cursor 又偷偷更新，这个功能太实用：Visual Editor for Cursor Browser07Open-AutoGLM Windows 安装部署教程08BongoCat - 跨平台键盘猫动画工具09Windows 11 官方系统安装与重装完整教程（2025年最新版）10安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）