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