导入elementui
安装 Element UI
通过 npm 或 yarn 安装 Element UI。确保项目已初始化并安装了 Vue.js。
npm install element-ui -S
# 或
yarn add element-ui
引入 Element UI
在 Vue 项目中完整引入 Element UI。修改 main.js 文件,添加以下代码:
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
按需引入(可选)
若需优化打包体积,可通过 babel-plugin-component 按需引入组件。先安装插件:
npm install babel-plugin-component -D
# 或
yarn add babel-plugin-component -D
修改 babel.config.js 文件,添加插件配置:
module.exports = {
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
};
之后在组件中按需引入,例如引入 Button 和 Select:
import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
全局配置(可选)
在引入 Element UI 时,可传入全局配置对象,例如设置默认的 size 或 zIndex:
Vue.use(ElementUI, { size: 'small', zIndex: 3000 });
使用组件
在 Vue 模板中直接使用 Element UI 组件:
<template>
<el-button type="primary">按钮</el-button>
<el-date-picker v-model="date"></el-date-picker>
</template>
主题定制(可选)
通过覆盖 SCSS 变量自定义主题。安装主题生成工具:
npm install element-theme -g
npm install element-theme-chalk -D
初始化变量文件并编译主题:
et -i
et
修改生成的 element-variables.scss 文件后重新编译。







