一、創建一個vue新項目（cli方式）

? ? |--命令：vue init webpack elementui02

創建vue項目elementui02

創建成功

二、通過npm方式安裝element-ui

npm方式安裝element-ui

?三、項目中引入element

? ? |--兩種方式：完整引入和按需引入

? ? |--完整引入：

完整引入

在helloworld組件中引入el-button

引入element-ui成功

|--按需引入（借助插件）：

? ? |--需要借助babel-plugin-component插件，按照我們需要的組件引入，以達到減小項目的目的。

? ? |--安裝：babel-plugin-component

安裝babel-plugin-component命令

? ? |--修改.babelrc文件：

.babelrc文件修改

? ? |--在main.js進行配置：

在main.js引入相關組件

? ? |--在HelloWorld進行使用：

使用

頁面效果

? ? |--如果引入沒有配置的組件：el-dialog

引入el-dialog

報錯

? ? |--完整的組件列表：

? ? ? ? |--詳見：https://element.eleme.cn/#/zh-CN/component/quickstart

四、全局配置size和zIndex

? ? |--在引入Element時，可以傳入一個全局配置對象{size:'small',zIndex:3000}。

? ? ? ? |--size：用于改變組件的默認尺寸。

? ? ? ? |--zIndex：設置彈窗的出事z-index(默認：2000)。

? ? |--完整引入配置：

完整引入element配置

? ? |--按需引入配置：

按需引入element配置

頁面效果