Vue2 element-ui引入 及定制element-ui主题

一. 完整引入

1.安装element-ui

npm install element-ui -S

2.页面配置（在 main.js 中）

// 引入...
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';// 注册
Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App)
});

二. 按需引入

1.安装 element-ui -S 和 babel-plugin-component

npm install element-ui -S

npm install babel-plugin-component -D

2.babelrc文件中修改配置

{"presets": [["es2015", { "modules": false }]],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]
}

3.项目中src目录下新建plugins/element.js 文件 （需要什么组件，引入什么组件即可）

import Vue from "vue";
import {Button,Form,FormItem,Input,Table,TableColumn,Pagination,Dropdown,DropdownMenu,DropdownItem,} from "element-ui";Vue.use(Button);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Input);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Pagination);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);

4.在main.js 中引入

// main.js
import "./plugins/element.js";

 5.测试组件

  <el-button type="primary">测试按钮</el-button>

三. 定制化主题

①仅替换主题色

1. 引入自定义主题 （ 推荐使用在线主题生成工具 ）

生成的主题文件， 解压后 放置于的根目录 styles/theme/index.css 文件,并在main.js中引入

// main.js
import '@/styles/theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'Vue.use(ElementUI)

2.搭配插件按需引入组件主题

如果是搭配 babel-plugin-component 一起使用，只需要修改 .babelrc 的配置，指定 styleLibraryName 路径为自定义主题相对于 .babelrc 的路径，注意要加 ~

{"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "~theme"}]]
}

 3.效果展示 （测试主题色 #27BA9B）

 

---

Vue3 elementPlus引入 及定制elementPlus主题https://blog.csdn.net/m0_71071209/article/details/141144484?spm=1001.2014.3001.5502