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配置


页面效果
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容