03.Element UI 之安装使用（npm）

一、创建一个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配置

页面效果