Element组件完整引入、按需引入、样式修改（全局、局部）、简单安装less以及npm命令证书过期等

目录

  • 一、npm 安装
  • 二、完整引入
  • 三、按需引入
  • 四、样式修改
    • 1.按需加载的全局样式修改
    • 2. 局部样式修改
      • 1. 在 css 预处理器如 less scss 等直接使用```::v-deep```
      • 2. 只能用在原生 CSS 语法中:```/deep/ ```或者 ```>>> ```
  • 五、 拓展：npm 安装less报错，提示证书过期
  • 六、拓展：Vue 项目中配置 Element-ui 按需引入时，babel.config.js 配置 ["es2015", { "modules": false }] 报错

一、npm 安装

npm i element-ui -S

二、完整引入

  1. 在 main.js 中写入以下内容：
    import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App)
});
  2. 以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

三、按需引入

  1. 借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

  2. 首先，安装 babel-plugin-component：npm install babel-plugin-component -D

  3. 然后，将 .babelrc (或者 babel.config.js)修改为：

    module.exports = {presets: ['@vue/cli-plugin-babel/preset',// ["es2015", { "modules": false }]["@babel/preset-env", { "modules": false }]],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]
}

  4. 在main.js所在目录创建一个plugins文件夹，该文件夹下创建一个element.js文件

// 按需引入
import Vue from 'vue'
// 需要注意的是，样式文件需要单独引入
import 'element-ui/lib/theme-chalk/index.css';
// 修改样式，根据实际项目自定义 （这里修改的样式会在整个项目所有界面的应用，全局的）
import '@/assets/css/DatePicker.css';
import '@/assets/css/Pagination.css';
import '@/assets/css/Table.css'; 
import '@/assets/css/select.css'; 
//..................................
import {Button,Select,Option,Image,Carousel,CarouselItem,DatePicker,Pagination,Radio,RadioButton,RadioGroup,Dialog,Table,TableColumn,Descriptions,DescriptionsItem} from 'element-ui'Vue.use(Descriptions)
Vue.use(DescriptionsItem)
Vue.use(Button)
Vue.use(Select)
Vue.use(Option)
Vue.use(Image)
Vue.use(Carousel)
Vue.use(CarouselItem)
Vue.use(DatePicker)
Vue.use(Pagination)
Vue.use(Radio)
Vue.use(RadioButton)
Vue.use(Dialog)
Vue.use(RadioGroup)
Vue.use(Table)
Vue.use(TableColumn)

在这里插入图片描述
完整组件列表和引入方式（参考）------------如上根据实际需要引入对应的组件

		import Vue from 'vue';import {Pagination,Dialog,Autocomplete,Dropdown,DropdownMenu,DropdownItem,Menu,Submenu,MenuItem,MenuItemGroup,Input,InputNumber,Radio,RadioGroup,RadioButton,Checkbox,CheckboxButton,CheckboxGroup,Switch,Select,Option,OptionGroup,Button,ButtonGroup,Table,TableColumn,DatePicker,TimeSelect,TimePicker,Popover,Tooltip,Breadcrumb,BreadcrumbItem,Form,FormItem,Tabs,TabPane,Tag,Tree,Alert,Slider,Icon,Row,Col,Upload,Progress,Spinner,Badge,Card,Rate,Steps,Step,Carousel,CarouselItem,Collapse,CollapseItem,Cascader,ColorPicker,Transfer,Container,Header,Aside,Main,Footer,Timeline,TimelineItem,Link,Divider,Image,Calendar,Backtop,PageHeader,CascaderPanel,Loading,MessageBox,Message,Notification} from 'element-ui';Vue.use(Pagination);Vue.use(Dialog);Vue.use(Autocomplete);Vue.use(Dropdown);Vue.use(DropdownMenu);Vue.use(DropdownItem);Vue.use(Menu);Vue.use(Submenu);Vue.use(MenuItem);Vue.use(MenuItemGroup);Vue.use(Input);Vue.use(InputNumber);Vue.use(Radio);Vue.use(RadioGroup);Vue.use(RadioButton);Vue.use(Checkbox);Vue.use(CheckboxButton);Vue.use(CheckboxGroup);Vue.use(Switch);Vue.use(Select);Vue.use(Option);Vue.use(OptionGroup);Vue.use(Button);Vue.use(ButtonGroup);Vue.use(Table);Vue.use(TableColumn);Vue.use(DatePicker);Vue.use(TimeSelect);Vue.use(TimePicker);Vue.use(Popover);Vue.use(Tooltip);Vue.use(Breadcrumb);Vue.use(BreadcrumbItem);Vue.use(Form);Vue.use(FormItem);Vue.use(Tabs);Vue.use(TabPane);Vue.use(Tag);Vue.use(Tree);Vue.use(Alert);Vue.use(Slider);Vue.use(Icon);Vue.use(Row);Vue.use(Col);Vue.use(Upload);Vue.use(Progress);Vue.use(Spinner);Vue.use(Badge);Vue.use(Card);Vue.use(Rate);Vue.use(Steps);Vue.use(Step);Vue.use(Carousel);Vue.use(CarouselItem);Vue.use(Collapse);Vue.use(CollapseItem);Vue.use(Cascader);Vue.use(ColorPicker);Vue.use(Transfer);Vue.use(Container);Vue.use(Header);Vue.use(Aside);Vue.use(Main);Vue.use(Footer);Vue.use(Timeline);Vue.use(TimelineItem);Vue.use(Link);Vue.use(Divider);Vue.use(Image);Vue.use(Calendar);Vue.use(Backtop);Vue.use(PageHeader);Vue.use(CascaderPanel);Vue.use(Loading.directive);Vue.prototype.$loading = Loading.service;Vue.prototype.$msgbox = MessageBox;Vue.prototype.$alert = MessageBox.alert;Vue.prototype.$confirm = MessageBox.confirm;Vue.prototype.$prompt = MessageBox.prompt;Vue.prototype.$notify = Notification;Vue.prototype.$message = Message;
  1. 在main.js中按需引入element组件
    import Vue from 'vue'
import App from './App.vue'import ElementUI from 'element-ui';
import './plugins/element.js'Vue.config.productionTip = false
Vue.use(ElementUI);new Vue({el:'#app',render: h => h(App),
})

四、样式修改

1.按需加载的全局样式修改

在这里插入图片描述
在这里插入图片描述

Table.css:

.el-table{background-color: transparent;border: 1px solid #227AFF;
}.el-table--border::after, .el-table--group::after, .el-table::before {content: '';position: absolute;background-color: transparent;z-index: 1;
}.el-table .has-gutter tr {background-color: #1954B2;
}.el-table tr{background-color: transparent;
}.el-table .el-table__row{/* background-color: transparent; */background-color: #0f204a;
}.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {background: #1B2A50;
}.el-table th.el-table__cell {background-color: transparent;
}.el-table, .el-table__expanded-cell {background-color: transparent;
}
.el-table .cell {color: #fff;
}
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {/* border-bottom: none; */border-bottom: 1px solid #227AFF;
}.el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {border-right: 1px solid #227AFF;
}/* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
.el-table--enable-row-hover .el-table__body tr:hover > td {background-color: transparent !important;cursor:pointer; /* 修改鼠标样式 *//* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
}/* 滚动条整体部分 */
.el-table__body-wrapper::-webkit-scrollbar{background-color: #0f204a;
}      /* 滚动条里面的滑块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条） */
.el-table__body-wrapper::-webkit-scrollbar-thumb   {/*滚动条里面小方块*/width: 100%;border-radius: 10px;background-color: #227AFF;border: 0.3rem solid #0f204a;
}
/* 滚动条的轨道（里面装有Thumb） */
.el-table__body-wrapper::-webkit-scrollbar-track   {/*滚动条里面轨道*/background-color: #0f204a;border-radius: 2px;
}
/* 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。 */
.el-table__body-wrapper::-webkit-scrollbar-button {
display: none;
}
/* 内层轨道，滚动条中间部分（除去） */
.el-table__body-wrapper::-webkit-scrollbar-track-piece {
background-color: #0f204a;
}
/* 边角，即两个滚动条的交汇处 */
.el-table__body-wrapper::-webkit-scrollbar-corner {}
/* 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件 */
.el-table__body-wrapper::-webkit-resizer  {}

Pagination.css:

.el-pagination{width: 100%;display: flex;align-items: center;justify-content: center;
}
/* 分页的样式 */
/* 左边箭头 */
.el-pagination button:disabled {color: #339EFF !important;background-color: transparent !important;/* border: 0.125rem solid #339EFF; */
}
.el-pagination .btn-prev  {width: 2rem;height: 2rem;min-width: 25px;min-height: 25px;line-height: 2rem;border: 1px solid #339EFF;margin-right: 0.3125rem;padding: 0;
}/* 右箭头 */
.el-pagination .btn-next, .el-pagination .btn-prev {background: transparent !important;color: #339EFF !important;/* border: 0.125rem solid #339EFF; */
}
.el-icon-arrow-right{/* margin-right: 8px; */font-size: 1rem;
}
.el-pagination .btn-next{width: 2rem;height: 2rem;min-width: 25px;min-height: 25px;line-height: 2rem;border: 1px solid #339EFF;margin-left: 0.3125rem;padding: 0;
}
.el-pagination .el-icon{font-size: 1rem;
}/* 总条数 */
.el-pagination__total {margin-right: 10px;font-weight: 400;color: #fff;display: flex;align-items: center; 
}
.el-pagination button, .el-pagination span:not([class*=suffix]) {font-size: 1rem;height: auto;
}
/* XX/页 */
.el-input__inner{
background-color: transparent;
color: #fff;
}
.el-input--mini .el-input__inner {height: 2rem;line-height: 2rem;min-height: 25px;
}.el-popper[x-placement^=bottom] .popper__arrow::after {top: 1px;margin-left: -6px;border-top-width: 0;border-bottom-color: #1954B2;
}
.el-select-dropdown {position: absolute;z-index: 1001;border: 1px solid #32B4FF;border-radius: 4px;background-color: #1954B2;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);box-sizing: border-box;margin: 5px 0;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {background-color: transparent;
}
.el-select-dropdown__item.selected {color: #32B4FF;font-weight: 700;
}
.el-select-dropdown__item {color: #fff;
}/* 数字 */
.el-dialog, .el-pager li {background: transparent !important;color: #339EFF;border: 0.125rem solid #339EFF;
}
/* 省略号 */
.el-pager li.btn-quicknext, .el-pager li.btn-quickprev {color: #339EFF;border: 0.125rem solid #339EFF;
}
/* 大小 */
.el-pager li {margin-right: 0.3125rem;min-width: 25px;min-height: 25px;width: 2rem;height: 2rem;line-height: 2rem;margin-left: 0.3125rem;
}
/* 选中 */
.el-pager li.active {color: #FFEC1A;cursor: default;border: 2px solid #FFEC1A;
}
/* 选中后面那个样式 */
.el-pager li.active+li {border-left: 1px;border: 1px solid #339EFF;
}

DatePicker.css:

  /* 年份弹窗样式 */.el-picker-panel{color: #fff !important;border: none !important;box-shadow: none !important;background: rgb(13 26 77) !important; /* background: #000000 !important; *//* opacity: 0.8; */}.el-date-picker__header .el-picker-panel__icon-btn {color: #fff !important;}.el-date-picker__header-label {color: #fff !important;}.el-month-table td  .cell {color: #fff  !important;}.el-month-table td.current:not(.disabled) .cell {color: #33b1e5 !important;}

select.css:

.tistle-rightss .el-select {display: inline-block;position: relative;width: 100%;height: 100%;
}
.tistle-rightss .el-input__inner {-webkit-appearance: none;background-color: #000;background-image: none;border: none;color: #fff;width: 98%;text-align: right;
}
.tistle-rightss .el-select-dropdown {border: none;background-color: #000;box-shadow: none;
}
.tistle-rightss .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {background-color: #000;
}
.tistle-rightss .el-select-dropdown__item {color: #fff;
}

…

<style>
/* // 在当前 vue 单页面中添加一个新的style标签 */
/* // （在当前的vue单页面的style标签后，添加一对新的style标签，新的style标签中不要添加scoped属性。 */
/* // 在有写scoped的style标签中书写的样式不会覆盖 ElementUI 默认的样式。） *//* 新的style标签中不添加scoped属性,其中设置的样式也是全局的 */
/* .el-table {background-color: transparent;border: 10px solid red;
} *//* 在获取到的样式里加上能限制范围的父层选择器，这样就不算全局样式了，只在这个界面生效。 */
/* .ElementCss .el-table {background-color: transparent;border: 10px solid yellow;
} */
</style>

2. 局部样式修改

1. 在 css 预处理器如 less scss 等直接使用::v-deep

<template><div class="ElementCss"><div class="block"><span class="demonstration">年： </span><el-date-picker v-model="year" type="year" placeholder="选择年"></el-date-picker></div><div class="block"><span class="demonstration">年月： </span><el-date-picker v-model="month" type="month" placeholder="选择月"></el-date-picker></div><div class="block"><span class="select-box">下拉框： </span><el-select v-model="value" placeholder="请选择"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></div><el-table :data="list.slice((pageNum - 1) * pageSize, pageNum * pageSize)" style="width: 100%"><el-table-column align="center" prop="id" label="编号" min-width="80"></el-table-column><el-table-column align="center" prop="date" label="日期" min-width="150"></el-table-column><el-table-column align="center" prop="name" label="姓名" min-width="80"></el-table-column><el-table-column align="center" prop="address" label="地址" min-width="250"></el-table-column></el-table><div class="pagination-box"><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum":page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div></div>
</template><script>
export default {name: "ElementCss",data() {return {year: '',month: '',options: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶'}, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}],value: '',pageNum: 1,pageSize: 5,total: 11,list: [{id: "0001",date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{id: "0002",date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",},{id: "0003",date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{id: "0004",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},{id: "0005",date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{id: "0006",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},{id: "0007",date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{id: "0008",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},{id: "0009",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},{id: "00010",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},{id: "00011",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},],};},mounted() {},methods: {handleSizeChange(val) {console.log(`每页 ${val} 条`);},handleCurrentChange(val) {console.log(`当前页: ${val}`);}},
};
</script><style scoped lang="less">
::v-deep .el-table {background-color: transparent;border: 10px solid green;
}
.ElementCss {background: black;color: #fff;
}.block {margin-bottom: 20px;
}.pagination-box {margin-top: 20px;
}
</style>

2. 只能用在原生 CSS 语法中:/deep/ 或者 >>> 

<style scoped>
* // 找到需要修改的 ElementUI 标签的类名，然后在类名前加上 /deep/ ，可以强制修改默认样式。这种方式可以直接用到有 scoped 属性的 style 标签中。 *//* 局部样式： 使用 /deep/ 深度修改标签样式----只能用在原生 CSS 语法中，不能在 css 预处理器如 less scss 等直接使用 *//deep/ .el-table {background-color: transparent;border: 10px solid red;
} 
/* 局部样式： 可以使用 >>> 来深度修改样式-----只能用在原生 CSS 语法中，不能在 css 预处理器如 less scss 等直接使用 */>>> .el-table {background-color: transparent;border: 10px solid yellow;
} 
</style>

在这里插入图片描述
在这里插入图片描述

五、 拓展：npm 安装less报错，提示证书过期

在MacOS下，less-loader安装的同时会自动安装less， 而windows和Linux环境则不会。
所以，使用less时，为了兼容性考虑，还是老老实实按照官网的要求:
npm install --save less less-loader
在这里插入图片描述
解决方案：命令行执行如下，然后重新安装less

npm cache clean --force
npm config set strict-ssl false

六、拓展：Vue 项目中配置 Element-ui 按需引入时，babel.config.js 配置 [“es2015”, { “modules”: false }] 报错

在这里插入图片描述
解决方案:

  1. 安装 @babel/preset-env: npm i @babel/preset-env -D
  2. 把 babel.config.js 文件中 “es2015” 修改为 “@babel/preset-env”
    module.exports = {presets: ['@vue/cli-plugin-babel/preset',// ["es2015", { "modules": false }]["@babel/preset-env", { "modules": false }]],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/423246.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java-泛型与通配符

Java-泛型与通配符

泛型基础 泛型示例 泛型的作用 泛型的语法 注意事项 1.泛型只能用引用类型实例化而非基本类型 自定义泛型 自定义泛型类 2中数组不能初始化是因为不知道要开辟多大的空间 3 类加载是会加载静态方法 此时泛型的具体类型并没有被确定 因为对象没有被 声明或实例化 自定义泛…
阅读更多...
Sqoop与Flume的集成：实时数据采集

Sqoop与Flume的集成：实时数据采集

将Sqoop与Flume集成是实现实时数据采集和传输的重要步骤之一。Sqoop用于将数据从关系型数据库导入到Hadoop生态系统中&#xff0c;而Flume用于数据流的实时采集、传输和处理。本文将深入探讨如何使用Sqoop与Flume集成&#xff0c;提供详细的步骤、示例代码和最佳实践&#xff0…
阅读更多...
Nginx 基础使用

Nginx 基础使用

目录结构 进入Nginx的主目录我们可以看到这些文件夹 client_body_temp conf fastcgi_temp html logs proxy_temp sbin scgi_temp uwsgi_temp其中这几个文件夹在刚安装后是没有的&#xff0c;主要用来存放运行过程中的临时文件 client_body_temp fastcgi_temp proxy_temp scg…
阅读更多...
定向减免！函数计算让轻量 ETL 数据加工更简单，更省钱

定向减免！函数计算让轻量 ETL 数据加工更简单，更省钱

作者&#xff1a;澈尔、墨飏 业内较为常见的高频短时 ETL 数据加工场景&#xff0c;即频率高时延短&#xff0c;一般均可归类为调用密集型场景。此场景有着高并发、海量调用的特性&#xff0c;往往会产生高额的计算费用&#xff0c;而业内推荐方案一般为攒批处理&#xff0c;业…
阅读更多...
eNSP学习——配置通过FTP进行文件操作

eNSP学习——配置通过FTP进行文件操作

原理概述&#xff1a; FTP&#xff08;File Transfer Protocol&#xff0c;文件传输协议&#xff09;是在TCP/IP网络和Internet上最早使用的协议之一&#xff0c;在TCP/IP协议族中属于应用层协议&#xff0c;是文件传输的Internet标准。主要功能是向用户提供本地和远程主机…
阅读更多...
一篇文章带你了解 什么是u(ustd）带你了解他的前世今生

一篇文章带你了解 什么是u(ustd）带你了解他的前世今生

在数字货币的繁荣世界中&#xff0c;USDT无疑是其中一位重要的角色。它的前世今生&#xff0c;是一个从无到有&#xff0c;从小到大&#xff0c;经历了种种波折和争议的故事。 2014年11月下旬&#xff0c;一个名为Realcoin的注册地为马恩岛和香港的公司决定改变自己的名字&…
阅读更多...
【test】ubuntu系统盘制作

【test】ubuntu系统盘制作

u盘&#xff1a;16G 系统&#xff1a;win11 工具&#xff1a;rufus 镜像版本:ubuntu20.04 Rufus 是一款格式化和创建 USB 启动盘的辅助工具。 本软件适用于以下场景&#xff1a; 需要将可引导 ISO (Windows、Linux、UEFI 等) 刻录到 USB 安装媒介的情况 需要处理未安装操作系统…
阅读更多...
Flutter 自定义AppBar实现滚动渐变

Flutter 自定义AppBar实现滚动渐变

1、使用ListView实现上下滚动。 2、使用Stack&#xff1a;允许将其子部件放在彼此的顶部&#xff0c;第一个子部件将放置在底部。所以AppBar&#xff0c;写在ListView下面。 3、MediaQuery.removePadding&#xff1a;当使用ListView的时候发现&#xff0c;顶部有块默认的Padd…
阅读更多...
macbookpro怎么恢复出厂设置

macbookpro怎么恢复出厂设置

如果你的MacBook Pro出现了一些系统问题&#xff0c;或者你想将其出售或转让&#xff0c;恢复出厂设置是一个好的选择。下面是一些步骤&#xff0c;告诉你如何恢复你的MacBook Pro到出厂设置&#xff1a; 步骤一&#xff1a;备份 在恢复出厂设置之前&#xff0c;好的习惯是备…
阅读更多...
【 CSS 】定位

【 CSS 】定位

不要因为小小的失败而放弃大大的梦想&#xff0c;每一次坚持都是通向成功的一步。- 马克吐温 1. 定位 1.1 为何使用定位 我们先来看一个效果&#xff0c;同时思考一下用标准流或浮动能否实现类似的效果&#xff1f; 场景1: 某个元素可以自由的在一个盒子内移动位置&#xff0c…
阅读更多...
【算法与数据结构】377、LeetCode组合总和 Ⅳ

【算法与数据结构】377、LeetCode组合总和 Ⅳ

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;本题明面上说是组合&#xff0c;实际上指的是排列。动态规划排列组合背包问题需要考虑遍历顺序。 d p …
阅读更多...
快速了解工业交换机

快速了解工业交换机

工业交换机是专门为工业环境设计的数据通信设备。该设备的主要作用是满足工业控制系统对数据通信的要求&#xff0c;实现不同设备之间的数据传输和网络连接。工业交换机在适应恶劣环境、抗干扰和稳定性等方面表现更出色&#xff0c;相较于传统的商用交换机。 它的基本原理是利用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023