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

小白_ysf2024-01-23 22:10

目录

  • [一、npm 安装](#一、npm 安装)
  • 二、完整引入
  • 三、按需引入
  • 四、样式修改
    • 1.按需加载的全局样式修改
    • [2. 局部样式修改](#2. 局部样式修改)
      • [1. 在 css 预处理器如 less scss 等直接使用```::v-deep```](#1. 在 css 预处理器如 less scss 等直接使用::v-deep)
      • [2. 只能用在原生 CSS 语法中:```/deep/ ```或者 ```>>> ```](#2. 只能用在原生 CSS 语法中:/deep/ 或者 >>> )
  • [五、 拓展：npm 安装less报错，提示证书过期](#五、 拓展：npm 安装less报错，提示证书过期)
  • [六、拓展：Vue 项目中配置 Element-ui 按需引入时，babel.config.js 配置 ["es2015", { "modules": false }] 报错](#六、拓展：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"
      }
    ]
  ]
}
相关推荐
崔庆才丨静觅1 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60612 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了2 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅2 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅2 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅3 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment3 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅3 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊3 小时前
jwt介绍
前端
爱敲代码的小鱼3 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示10让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南