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"
      }
    ]
  ]
}
相关推荐
前端小小王31 分钟前
React Hooks
前端·javascript·react.js
迷途小码农零零发40 分钟前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀1 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪2 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
ekskef_sef3 小时前
32岁前端干了8年，是继续做前端开发，还是转其它工作
前端
sunshine6413 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻4 小时前
Vue（四）
前端·javascript·vue.js
蜜獾云4 小时前
npm淘宝镜像
前端·npm·node.js
dz88i84 小时前
修改npm镜像源
前端·npm·node.js
Jiaberrr4 小时前
解锁 GitBook 的奥秘：从入门到精通之旅
前端·gitbook
热门推荐
01Cube-Studio：开源大模型全链路一站式中台02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问07构建高效的广告投放系统：应用架构的设计与实现08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10【一文读懂】NTN（非地面网络）技术介绍