一、安裝 Element 插件:

vue add element

Howdoyou wanttoimportElement?-->選擇 Import on demand （關(guān)鍵）

Choosethe locale you wanttoload–>選擇 zh-CN

二、安裝之后注意：

安裝之后vue會自動配置，App.vue 自動將el-button作為范例，必須將 vue.config.js 中css中的 modules 設(shè)置為 false：

三、添加element全部插件

在 element.js 文件添加全部element組件，不需要使用則注釋掉

四、源碼：

/**

*? UI組件 Element? http://element-cn.eleme.io/#/zh-CN

*? element按需加載

*? 注意:

*? 1.項目中需要的組件進(jìn)行釋放(解開注釋)

*? 2.打包只會包含釋放(解開注釋)的組件, 減少打包文件大小

*/

import Vue from 'vue'

import {

? Pagination, // 分頁

? Dialog, // 對話框

? Autocomplete, // 遠(yuǎn)程下拉框

? Dropdown, // 下拉菜單

? DropdownMenu, // 下拉菜單

? DropdownItem, // 下拉item

? Menu, // 導(dǎo)航欄菜單

? Submenu, // 子菜單

? MenuItem, // 菜單itemp

? MenuItemGroup, // 菜單組

? Input, // 輸入框

? InputNumber, // 計數(shù)器

? Radio, // 單選框

? RadioGroup, // 單選框組

? RadioButton, // 單選框按鈕

? Checkbox, // 復(fù)選框

? CheckboxButton, // 復(fù)選框按鈕

? CheckboxGroup, // 復(fù)選框組

? Switch, // 開關(guān)

? Select, // 選擇器

? Option, // 選擇器item

? OptionGroup, // 選擇器分組

? Button, // 按鈕

? ButtonGroup, // 按鈕組

? Table, // 表格

? TableColumn, // 表格列

? DatePicker, // 日期選擇器

? TimeSelect, // 時間選擇器組

? TimePicker, // 時間選擇器

? Popover, // 彈出提示框

? Tooltip, // 文字提示

? Breadcrumb, // 面包屑

? BreadcrumbItem, // 面包屑item

? Form, // 表單

? FormItem, // 表單item

? Tabs, // 標(biāo)簽頁

? TabPane, // 標(biāo)簽組

? Tag, // 標(biāo)簽

? Tree, // 樹形控件

? Alert, // 警告

? Slider, // 滑塊

? Icon, // 圖標(biāo)

? Row, // Layout 布局

? Col, // Layout 布局

? Upload, // 文件上傳

? Progress, // 進(jìn)度條

? Badge, // 標(biāo)記

? Card, // 卡片

? Rate, // 星星評分

? Steps, // 步驟條

? Step, // 步驟條

? Carousel, // 走馬燈

? CarouselItem, // 走馬燈item

? Collapse, // 折疊面板

? CollapseItem, // 折疊面板item

? Cascader, // 級聯(lián)選擇器

? ColorPicker, // 顏色選擇器

? Transfer, // 穿梭框

? Container, // 布局容器

? Header, // 布局容器 header

? Aside, // 布局容器 aside

? Main, // 布局容器 main

? Footer, // 布局容器 footer

? Loading, // 加載

? MessageBox, // 彈框

? Message, // 消息提示

? Notification, // 通知

? Timeline, // 時間線

? TimelineItem, // 時間線item

? Divider, // 分割線

? // Calenar, // 日歷

? Image // 圖片

} from 'element-ui'

Vue.use(Pagination) // 分頁

Vue.use(Dialog) // 對話框

Vue.use(Autocomplete) // 遠(yuǎn)程下拉框

Vue.use(Dropdown) // 下拉菜單

Vue.use(DropdownMenu) // 下拉菜單

Vue.use(DropdownItem) // 下拉item

Vue.use(Menu) // 導(dǎo)航欄菜單

Vue.use(Submenu) // 子菜單

Vue.use(MenuItem) // 菜單itemp

Vue.use(MenuItemGroup) // 菜單組

Vue.use(Input) // 輸入框

Vue.use(InputNumber) // 計數(shù)器

Vue.use(Radio)// 單選框

Vue.use(RadioGroup) // 單選框組

Vue.use(RadioButton) // 單選框按鈕

Vue.use(Checkbox) // 復(fù)選框

Vue.use(CheckboxButton) // 復(fù)選框按鈕

Vue.use(CheckboxGroup) // 復(fù)選框組

Vue.use(Switch) // 開關(guān)

Vue.use(Select) // 選擇器

Vue.use(Option) // 選擇器item

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) // 面包屑item

Vue.use(Form) // 表單

Vue.use(FormItem) // 表單item

Vue.use(Tabs) // 標(biāo)簽頁

Vue.use(TabPane) // 標(biāo)簽組

Vue.use(Tag) // 標(biāo)簽

Vue.use(Tree) // 樹形控件

Vue.use(Alert)// 警告

Vue.use(Slider) // 滑塊

Vue.use(Icon) // 圖標(biāo)

Vue.use(Row) // Layout 布局

Vue.use(Col) // Layout 布局

Vue.use(Upload) // 文件上傳

Vue.use(Progress) // 進(jìn)度條

Vue.use(Badge) // 標(biāo)記

Vue.use(Card) // 卡片

Vue.use(Rate) // 星星評分

Vue.use(Steps) // 步驟條

Vue.use(Step) // 步驟條

Vue.use(Carousel) // 走馬燈

Vue.use(CarouselItem) // 走馬燈item

Vue.use(Collapse) // 折疊面板

Vue.use(CollapseItem) // 折疊面板item

Vue.use(Cascader) // 級聯(lián)選擇器

Vue.use(ColorPicker) // 顏色選擇器

Vue.use(Transfer) // 穿梭框

Vue.use(Container) // 布局容器

Vue.use(Header) // 布局容器 header

Vue.use(Aside) // 布局容器 aside

Vue.use(Main) // 布局容器 main

Vue.use(Footer) // 布局容器 footer

Vue.use(Loading.directive) // 加載

Vue.use(Timeline) // 時間線

Vue.use(TimelineItem) // 時間線item

Vue.use(Divider) // 分割線

// Vue.use(Calenar) // 日歷

Vue.use(Image) // 圖片

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 // 消息提示