一、Element-Ui简介

element 是基于 vue 实现的一套不依赖业务的 UI 组件库，提供了丰富的PC端组件，减少用户对常用组件的封装，降低了开发的难易程度。Element-Ui是基于vue封装的组件库,简化了常用组件的封装,提高了重用性原则,提高了重用性原则;

二、Element-Ui的安装

安装命令如下:

1:Npm安装命令

npm i element-ui

2:Yarn 安装命令

yarn add element-ui

在项目中引入element-ui

你可以引入整个Element,或是根据需要引入部分组件.

1、完整引入 在main.js 中写入以下内容:

以上就是Element的引入,需要注意,样式文件需要单独引入

2、按需引入

借助Babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的.

首先安装babel-plugin-component -D

然后将.babelrc修改为:

接下来就可以在 main.js中写入需要引入的组件

三、Element-Ui的组件使用

1、 Button 按钮

(1).基础使用

代码片段

效果如下:

(2).禁用状态

代码片段 效果如下:

(3).加载中状态

代码片段

效果如下:

(4).按钮组

代码片段 效果如下:

2. Container 布局容器

基本布局

样式如下:

效果如下:

示例

总结:

使用element的组件,首先去官网，找到你需要的样式的组件代码,直接拷贝到你的项目需要的位置。

再根据你需要的功能，进行修改。