原文地址：/developer/chapter/18051
目录
安装
npm 安装
CDN
Hello world
快速上手
使用 vue-cli@3
使用 Starter Kit
引入 Element
全局配置
开始使用
使用 Nuxt.js
国际化
兼容 vue-i18n@5.x
兼容其他 i18n 插件
兼容 vue-i18n@6.x
按需加载里定制 i18n
通过 CDN 的方式加载语言文件
自定义主题
仅替换主题色
在项目中改变 SCSS 变量
命令行主题工具
内置过渡动画
fade 淡入淡出
zoom 缩放
collapse 展开折叠
按需引入
安装
npm 安装
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S
CDN
目前可以通过 /element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
<!-- 引入样式 --><link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="/element-ui/lib/index.js"></script>
我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 。
Hello world
通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。
<!DOCTYPE html><html><head><meta charset="UTF-8"><!-- import CSS --><link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css"></head><body><div id="app"><el-button @click="visible = true">Button</el-button><el-dialog :visible.sync="visible" title="Hello world"><p>Try Element</p></el-dialog></div></body><!-- import Vue before Element --><script src="/vue/dist/vue.js"></script><!-- import JavaScript --><script src="/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data: function() {return { visible: false }}})</script></html>
如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。
快速上手
本节将介绍如何在项目中使用 Element。
使用 vue-cli@3
我们为新版的 vue-cli 准备了相应的 Element 插件，你可以用它们快速地搭建一个基于 Element 的项目。
使用 Starter Kit
我们提供了通用的项目模板，你可以直接使用。对于 Laravel 用户，我们也准备了相应的模板，同样可以直接下载使用。
如果不希望使用我们提供的模板，请继续阅读。
引入 Element
你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。
完整引入
在 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)});
以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。
按需引入
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：
npm install babel-plugin-component -D
然后，将 .babelrc 修改为：
{"presets": [["es", { "modules": false }]],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]}
接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：
import Vue from 'vue';import { Button, Select } from 'element-ui';import App from './App.vue';ponent(Button.name, Button);ponent(Select.name, Select);/* 或写为* Vue.use(Button)* Vue.use(Select)*/new Vue({el: '#app',render: h => h(App)});
完整组件列表和引入方式（完整组件列表以 components.json 为准）
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,Badge,Card,Rate,Steps,Step,Carousel,CarouselItem,Collapse,CollapseItem,Cascader,ColorPicker,Transfer,Container,Header,Aside,Main,Footer,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(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(Container);Vue.use(Header);Vue.use(Aside);Vue.use(Main);Vue.use(Footer);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;
¶全局配置
在引入 Element 时，可以传入一个全局配置对象。该对象目前支持size与zIndex字段。size用于改变组件的默认尺寸，zIndex设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：
完整引入 Element：
import Vue from 'vue';import Element from 'element-ui';Vue.use(Element, { size: 'small', zIndex: 3000 });
按需引入 Element：
import Vue from 'vue';import { Button } from 'element-ui';Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };Vue.use(Button);
按照以上设置，项目中所有拥有size属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。
¶开始使用
至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。
¶使用 Nuxt.js
我们还可以使用 Nuxt.js。
国际化
Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：
// 完整引入 Elementimport Vue from 'vue'import ElementUI from 'element-ui'import locale from 'element-ui/lib/locale/lang/en'Vue.use(ElementUI, { locale })
或
// 按需引入 Elementimport Vue from 'vue'import { Button, Select } from 'element-ui'import lang from 'element-ui/lib/locale/lang/en'import locale from 'element-ui/lib/locale'// 设置语言locale.use(lang)// 引入组件ponent(Button.name, Button)ponent(Select.name, Select)
如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。
webpack.config.js
{plugins: [new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en')]}
兼容vue-i18n@5.x
Element 兼容 vue-i18n@5.x，搭配使用能更方便地实现多语言切换。
import Vue from 'vue'import VueI18n from 'vue-i18n'import Element from 'element-ui'import enLocale from 'element-ui/lib/locale/lang/en'import zhLocale from 'element-ui/lib/locale/lang/zh-CN'Vue.use(VueI18n)Vue.use(Element)Vue.config.lang = 'zh-cn'Vue.locale('zh-cn', zhLocale)Vue.locale('en', enLocale)
兼容其他 i18n 插件
如果不使用vue-i18n@5.x，而是用其他的 i18n 插件，Element 将无法兼容，但是可以自定义 Element 的 i18n 的处理方法。
import Vue from 'vue'import Element from 'element-ui'import enLocale from 'element-ui/lib/locale/lang/en'import zhLocale from 'element-ui/lib/locale/lang/zh-CN'Vue.use(Element, {i18n: function (path, options) {// ...}})
兼容vue-i18n@6.x
默认不支持 6.x 的vue-i18n，你需要手动处理。
import Vue from 'vue'import Element from 'element-ui'import VueI18n from 'vue-i18n'import enLocale from 'element-ui/lib/locale/lang/en'import zhLocale from 'element-ui/lib/locale/lang/zh-CN'Vue.use(VueI18n)const messages = {en: {message: 'hello',...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale)},zh: {message: '你好',...zhLocale // 或者用 Object.assign({ message: '你好' }, zhLocale)}}// Create VueI18n instance with optionsconst i18n = new VueI18n({locale: 'en', // set localemessages, // set locale messages})Vue.use(Element, {i18n: (key, value) => i18n.t(key, value)})new Vue({ i18n }).$mount('#app')
按需加载里定制 i18n
import Vue from 'vue'import DatePicker from 'element/lib/date-picker'import VueI18n from 'vue-i18n'import enLocale from 'element-ui/lib/locale/lang/en'import zhLocale from 'element-ui/lib/locale/lang/zh-CN'import ElementLocale from 'element-ui/lib/locale'Vue.use(VueI18n)Vue.use(DatePicker)const messages = {en: {message: 'hello',...enLocale},zh: {message: '你好',...zhLocale}}// Create VueI18n instance with optionsconst i18n = new VueI18n({locale: 'en', // set localemessages, // set locale messages})ElementLocale.i18n((key, value) => i18n.t(key, value))
通过 CDN 的方式加载语言文件
<script src="///vue"></script><script src="///element-ui"></script><script src="///element-ui/lib/umd/locale/en.js"></script><script>ELEMENT.locale(ELEMENT.lang.en)</script>
搭配vue-i18n使用
<script src="///vue"></script><script src="///vue-i18n/dist/vue-i18n.js"></script><script src="///element-ui"></script><script src="///element-ui/lib/umd/locale/zh-CN.js"></script><script src="///element-ui/lib/umd/locale/en.js"></script><script>Vue.locale('en', ELEMENT.lang.en)Vue.locale('zh-cn', ELEMENT.lang.zhCN)</script>
目前 Element 内置了以下语言：
简体中文（zh-CN）英语（en）德语（de）葡萄牙语（pt）西班牙语（es）丹麦语（da）法语（fr）挪威语（nb-NO）繁体中文（zh-TW）意大利语（it）韩语（ko）日语（ja）荷兰语（nl）越南语（vi）俄语（ru-RU）土耳其语（tr-TR）巴西葡萄牙语（pt-br）波斯语（fa）泰语（th）印尼语（id）保加利亚语（bg）波兰语（pl）芬兰语（fi）瑞典语（sv-SE）希腊语（el）斯洛伐克语（sk）加泰罗尼亚语（ca）捷克语（cs-CZ）乌克兰语（ua）土库曼语（tk）泰米尔语（ta）拉脱维亚语（lv）南非荷兰语（af-ZA）爱沙尼亚语（ee）斯洛文尼亚语（sl）阿拉伯语（ar）希伯来语（he）立陶宛语（lt）蒙古语（mn）哈萨克斯坦语（kz）匈牙利语（hu）罗马尼亚语（ro）库尔德语（ku）维吾尔语（ug-CN）高棉语（km）
如果你需要使用其他的语言，欢迎贡献 PR：只需加一个语言配置文件即可。
自定义主题
Element 默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。我们提供了三种方法，可以进行不同程度的样式自定义。
仅替换主题色
如果仅希望更换 Element 的主题色，推荐使用在线主题生成工具。Element 默认的主题色是鲜艳、友好的蓝色。通过替换主题色，能够让 Element 的视觉更加符合具体项目的定位。
使用上述工具，可以很方便地实时预览主题色改变之后的视觉，同时它还可以基于新的主题色生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」和「搭配插件按需引入组件主题」部分）。
在项目中改变 SCSS 变量
Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件，例如element-variables.scss，写入以下内容：
/* 改变主题色变量 */$--color-primary: teal;/* 改变 icon 字体路径变量，必需 */$--font-path: '~element-ui/lib/theme-chalk/fonts';@import "~element-ui/packages/theme-chalk/src/index";
之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：
import Vue from 'vue'import Element from 'element-ui'import './element-variables.scss'Vue.use(Element)
需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。
命令行主题工具
如果你的项目没有使用 SCSS，那么可以使用命令行主题工具进行深层次的主题定制：
安装工具
首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。
npm i element-theme -g
安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码。
# 从 npmnpm i element-theme-chalk -D# 从 GitHubnpm i /ElementUI/theme-chalk -D
初始化变量文件
主题生成工具安装成功后，如果全局安装可以在命令行里通过et调用工具，如果安装在当前目录下，需要通过node_modules/.bin/et访问到命令。执行-i初始化变量文件。默认输出到element-variables.scss，当然你可以传参数指定文件输出目录。
et -i [可以自定义变量文件]> ✔ Generator variables file
如果使用默认配置，执行后当前目录会有一个element-variables.scss文件。内部包含了主题所用到的所有变量，它们使用 SCSS 的格式定义。大致结构如下：
$--color-primary: #409EFF !default;$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */$--color-success: #67c23a !default;$--color-warning: #e6a23c !default;$--color-danger: #f56c6c !default;$--color-info: #909399 !default;...
修改变量
直接编辑element-variables.scss文件，例如修改主题色为红色。
$--color-primary: red;
编译主题
保存文件后，到命令行里执行et编译主题，如果你想启用watch模式，实时编译主题，增加-w参数；如果你在初始化时指定了自定义变量文件，则需要增加-c参数，并带上你的变量文件名
et> ✔ build theme font> ✔ build element theme
引入自定义主题
默认情况下编译的主题目录是放在./theme下，你可以通过-o参数指定打包目录。像引入默认主题一样，在代码里直接引用theme/index.css文件即可。
import '../theme/index.css'import ElementUI from 'element-ui'import Vue from 'vue'Vue.use(ElementUI)
搭配插件按需引入组件主题
如果是搭配babel-plugin-component一起使用，只需要修改.babelrc的配置，指定styleLibraryName路径为自定义主题相对于.babelrc的路径，注意要加~。
{"plugins": [["component", [{"libraryName": "element-ui","styleLibraryName": "~theme"}]]]}
如果不清楚babel-plugin-component是什么，请阅读 快速上手 一节。更多 element-theme 用法请参考项目仓库。
内置过渡动画
Element 内应用在部分组件的过渡动画，你也可以直接使用。在使用之前请阅读 transition 组件文档 。
fade 淡入淡出
提供el-fade-in-linear和el-fade-in两种效果。
<template><div><el-button @click="show = !show">Click Me</el-button><div style="display: flex; margin-top: 20px; height: 100px;"><transition name="el-fade-in-linear"><div v-show="show" class="transition-box">.el-fade-in-linear</div></transition><transition name="el-fade-in"><div v-show="show" class="transition-box">.el-fade-in</div></transition></div></div></template><script>export default {data: () => ({show: true})}</script><style>.transition-box {margin-bottom: 10px;width: 200px;height: 100px;border-radius: 4px;background-color: #409EFF;text-align: center;color: #fff;padding: 40px 20px;box-sizing: border-box;margin-right: 20px;}</style>
zoom 缩放
提供el-zoom-in-center，el-zoom-in-top和el-zoom-in-bottom三种效果。
<template><div><el-button @click="show2 = !show2">Click Me</el-button><div style="display: flex; margin-top: 20px; height: 100px;"><transition name="el-zoom-in-center"><div v-show="show2" class="transition-box">.el-zoom-in-center</div></transition><transition name="el-zoom-in-top"><div v-show="show2" class="transition-box">.el-zoom-in-top</div></transition><transition name="el-zoom-in-bottom"><div v-show="show2" class="transition-box">.el-zoom-in-bottom</div></transition></div></div></template><script>export default {data: () => ({show2: true})}</script><style>.transition-box {margin-bottom: 10px;width: 200px;height: 100px;border-radius: 4px;background-color: #409EFF;text-align: center;color: #fff;padding: 40px 20px;box-sizing: border-box;margin-right: 20px;}</style>
collapse 展开折叠
使用el-collapse-transition组件实现折叠展开效果。
<template><div><el-button @click="show3 = !show3">Click Me</el-button><div style="margin-top: 20px; height: 200px;"><el-collapse-transition><div v-show="show3"><div class="transition-box">el-collapse-transition</div><div class="transition-box">el-collapse-transition</div></div></el-collapse-transition></div></div></template><script>export default {data: () => ({show3: true})}</script><style>.transition-box {margin-bottom: 10px;width: 200px;height: 100px;border-radius: 4px;background-color: #409EFF;text-align: center;color: #fff;padding: 40px 20px;box-sizing: border-box;margin-right: 20px;}</style>
按需引入
// fade/zoom 等 import 'element-ui/lib/theme-chalk/base.css'; // collapse 展开折叠 import CollapseTransition from 'element-ui/lib/transitions/collapse-transition'; import Vue from 'vue' ponent(CollapseTransition.name, CollapseTransition)
