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.mzph.cn/news/641301.shtml

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

相关文章

斯拉、理想等车企大幅降价,新一轮大洗牌正在进行中 |百能云芯

2024年刚开年&#xff0c;各大车企就先后抛出降价大礼包&#xff01;1月1日&#xff0c;特斯拉率先宣布调价&#xff0c;推出Model 3后驱现车保险补贴及低息金融政策&#xff0c;总优惠幅度高达2.2万元。正当大家还没有完全消化完特斯拉的调价信息后&#xff0c;理想汽车也宣布…

Unity中URP下的 额外灯 逐像素光 和 逐顶点光

文章目录 前言一、额外灯 的 逐像素灯 和 逐顶点灯1、存在额外灯的逐像素灯2、存在额外灯的逐顶点灯 二、测试这两个宏的作用1、额外灯的逐像素灯2、额外灯的逐顶点灯 前言 在之前的文章中&#xff0c;我们了解了 主光相关的反射计算。 Unity中URP下的SimpleLit的 Lambert漫反…

有效的数独[中等]

优质博文&#xff1a;IT-BLOG-CN 一、题目 请你判断一个9 x 9的数独是否有效。只需要根据以下规则&#xff0c;验证已经填入的数字是否有效即可。 数字 1-9 在每一行只能出现一次。 数字 1-9 在每一列只能出现一次。 数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一…

Elasticsearch:介绍 kNN query,这是进行 kNN 搜索的专家方法

作者&#xff1a;来自 Elastic Mayya Sharipova, Benjamin Trent 当前状况&#xff1a;kNN 搜索作为顶层部分 Elasticsearch 中的 kNN 搜索被组织为搜索请求的顶层&#xff08;top level&#xff09;部分。 我们这样设计是为了&#xff1a; 无论分片数量多少&#xff0c;它总…

实现纯Web语音视频聊天和桌面分享(附源码,PC端+移动端)

在网页里实现文字聊天是比较容易的&#xff0c;但若要实现视频聊天&#xff0c;就比较麻烦了。本文将实现一个纯Web版的视频聊天和桌面分享的Demo&#xff0c;可直接在浏览器中运行&#xff0c;不需要安装任何插件。 一. 主要功能及支持平台 1.本Demo的主要功能有 &#xff…

【书生·浦语】大模型实战营——第六次作业

使用OpenCompass 评测 InterLM2-chat-chat-7B 模型在C-Eval数据集上的性能 环境配置 1. 创建虚拟环境 conda create --name opencompass --clone/root/share/conda_envs/internlm-base source activate opencompass git clone https://github.com/open-compass/opencompass cd…

【PWN · 格式化字符串|劫持fini_array|劫持got表】[CISCN 2019西南]PWN1

格式化字符串的经典利用&#xff1a;劫持got表。但是遇到漏洞点只能执行一次的情况&#xff0c;该怎么办&#xff1f; 前言 如果存在格式化字符串&#xff0c;保护机制开的不健全&#xff0c;通常可以劫持got表&#xff0c;构造后门函数。然而&#xff0c;如果不存在循环、栈溢…

gradle打包分离依赖jar

正常打包的jar是包含项目所依赖的jar包资源&#xff0c;而且大多数场景下的依赖资源是不会频繁的变更的&#xff0c;所以实际把项目自身jar和其所依赖的资源分离可以实现jar包瘦身&#xff0c;减小上传的jar包总大小&#xff0c;能实现加速部署的效果 一 原本结构 二 配置buil…

机器学习_正则化、欠拟合和过拟合

文章目录 正则化欠拟合和过拟合正则化参数 正则化 机器学习中的正则化是在损失函数里面加惩罚项&#xff0c;增加建模的模糊性&#xff0c;从而把捕捉到的趋势从局部细微趋势&#xff0c;调整到整体大概趋势。虽然一定程度上地放宽了建模要求&#xff0c;但是能有效防止过拟合…

用通俗易懂的方式讲解:使用 MongoDB 和 Langchain 构建生成型AI聊天机器人

想象一下&#xff1a;你收到了你梦寐以求的礼物&#xff1a;一台非凡的时光机&#xff0c;可以将你带到任何地方、任何时候。 你只有10分钟让它运行&#xff0c;否则它将消失。你拥有一份2000页的PDF&#xff0c;详细介绍了关于这台时光机的一切&#xff1a;它的历史、创造者、…

【计算机网络】应用层——HTTP 协议(一)

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【网络编程】 本专栏旨在分享学习计算机网络的一点学习心得&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 一、什么是 HTTP 协…

假期刷题打卡--Day10

一、C语言刷题 预处理命令模块的题目就只有几个&#xff0c;下面开始选择结构这个模块的题目。 1、MT1112中庸之道 请编写一个简单程序&#xff0c;输入3个整数&#xff0c;比较他们的大小&#xff0c;输出中间的那个数 格式 输入格式&#xff1a; 输入整型&#xff0c;空…

linux源码编译安装llvm

目录 1 建立文件夹llvm 2 下载源码到llvm文件夹 3 解压上述文件 4 将解压后的3个文件夹改名&#xff0c;并移动到llvm-9.0.0.src中&#xff1a; 5 在llvm文件夹内建立build文件夹&#xff0c;并进入该文件夹&#xff1a; 6 执行cmake命令 7 make 8 安装 9 安装成功后…

C++中特殊类的设计与单例模式的简易实现

设计一个只能在堆上创建对象的类 对于这种特殊类的设计我们一般都是优先考虑私有构造函数。然后对于一些特殊要求就直接通过静态成员函数的实现来完成。 class A//构造函数私有&#xff08;也可以析构函数私有&#xff09; { public:static A* creat(){return new A;} privat…

docker容器下php框架laravel的使用问题与解决方案

DB_CONNECTIONmysqlDB_HOSTlocalhost DB_CONNECTIONmysqlDB_HOSTdocker33-mysql-1 容器中只有数据库结构 进入MySQL容器内&#xff0c;创建表结构&#xff0c;添加数据 代码层面需要转换成数组 $query->get([*])->toArray(); 分页数据框架会返回带有data的数据&#xf…

计算机网络-AAA原理概述

对于任何网络&#xff0c;用户管理都是最基本的安全管理要求之一&#xff0c;在华为设备管理中通过AAA框架进行认证、授权、计费实现安全验证。 一、AAA概述 AAA&#xff08;Authentication(认证), Authorization(授权), and Accounting(计费)&#xff09;是一种管理框架&#…

大模型微调实战笔记

大模型三要素 1.算法&#xff1a;模型结构&#xff0c;训练方法 2.数据&#xff1a;数据和模型效果之间的关系&#xff0c;token分词方法 3.算力&#xff1a;英伟达GPU&#xff0c;模型量化 基于大模型对话的系统架构 基于Lora的模型训练最好用&#xff0c;成本低好上手 提…

CentOS 7安装全解析:适合初学者的指导

目录 前言 一.centos安装 1.下载镜像文件 2.安装 二.远程连接&#xff0c;换源 1.下载并且使用MobaXtermMobaXterm free Xserver and tabbed SSH client for Windows (mobatek.net)https://mobaxterm.mobatek.net/ 远程连接 2.换源 前言 在当今的信息化时代&#xff0c…

【Leetcode 965.】判断单值二叉树

单值二叉树&#xff1a; 示例一&#xff1a; 示例二&#xff1a; 代码&#xff1a; bool isUnivalTree(struct TreeNode* root) {if(rootNULL)return true;if(root->left&&root->left->val!root->val)return false;if(root->right&&root-&…

【LeetCode-135】分发糖果(贪心)

LeetCode135.分发糖果 题目描述 老师想给孩子们分发糖果&#xff0c;有 N 个孩子站成了一条直线&#xff0c;老师会根据每个孩子的表现&#xff0c;预先给他们评分。 你需要按照以下要求&#xff0c;帮助老师给这些孩子分发糖果&#xff1a; 每个孩子至少分配到 1 个糖果。…