一、创建一个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配置
页面效果