(快速上手)ElementUI组件在vue中的应用

Element 是饿了么前端团队开发的一个基于 Vue.js 的桌面端组件库,它提供的组件非常丰富,不仅功能强大,而且简单易用。

Element 非常的流行,大多数基于 Vue.js 开发的管理系统都会使用到它。

官网地址: https://element.eleme.cn/#/zh-CN

ElementUI组件库在前端开发中应用非常广泛,废话不多说,直接说怎么在vue框架中使用该组件。引入该组件库时,分为全部引入、按需引入两种。

全部引入

引入方便,但会导致整个项目体积过大,毕竟也许你只需要一个Button,结果把整个组件库,连同所有的样式都引入了,项目体积能不大嘛!

1.安装

官网: https://element.eleme.cn/#/zh-CN/component/quickstart

推荐使用npm方式安装,在vscode终端中输入如下命令:

npm i element-ui -S


2.全部引入

在main.js中引入

//完整引入ElementUI组件库

import ElementUI from 'element-ui'; //引入ElementUI组件库
import 'element-ui/lib/theme-chalk/index.css'; //引入ElementUI全部样式

Vue.use(ElementUI);   //使用插件

3.使用

在官网中可以看到,有各种各样的样式,如果需要,可以展开代码,直接C+V

在App.vue中做测试,直接把官网上的相应格式的代码写在.vue文件中,我这里是引用的上图最后一行的图标的代码。

<template>
  <div>
    <button>普通的按钮</button><br/><br/>
    <input type="text"><br/><br/>

    <!-- el-row、el-button、el-date-picker 它们都是组件-->
    <el-row>
      <el-button icon="el-icon-search" circle></el-button>
      <el-button type="primary" icon="el-icon-edit" circle></el-button>
      <el-button type="success" icon="el-icon-check" circle></el-button>
      <el-button type="info" icon="el-icon-message" circle></el-button>
      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
      <el-button type="danger" icon="el-icon-delete" circle></el-button><br/><br/>

      <!-- 自定义修改 type:primary/success/info/warning/danger            icon:图标   circle:是不是圆形-->
      <el-button type="success" icon="el-icon-s-check"></el-button>
    </el-row>
  </div>
</template>

<script>
export default {

}
</script>

使用typeplainroundcircle属性来定义 Button 的样式。

我们通过更改属性的值,进行自定义样式。

以 Button按钮为例:https://element.eleme.cn/#/zh-CN/component/button

下表是对各个属性的介绍,以及可取参数说明。摘自官网

Attributes

参数 说明 类型 可选值 默认值
size 尺寸 string medium / small / mini
type 类型 string primary / success / warning / danger / info / text
plain 是否朴素按钮 boolean false
round 是否圆角按钮 boolean false
circle 是否圆形按钮 boolean false
loading 是否加载中状态 boolean false
disabled 是否禁用状态 boolean false
icon 图标类名 string
autofocus 是否默认聚焦 boolean false
native-type 原生 type 属性 string button / submit / reset button

不管是Button还是其他的,每个的下面都会有相应属性的介绍和参数的说明,我们需要时就可以通过修改这些属性的值,来自定义格式。授人以鱼,不如授之以渔。快快做到举一反三吧。

按需引入

大部分时候我们只需要引入其中的某一个或者某几个,我们没必要把所有的组件库和css样式都引入到项目中,推荐采用按需引入。减小项目的体积。

1.安装

推荐使用npm方式安装,在vscode终端中输入如下命令:需要借助babel-plugin-component

//-D  表示开发环境中安装
npm install babel-plugin-component -D

修改配置文件:babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
     ["@babel/preset-env", { "modules": false }]
   ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

上面是最新的配置,下面的图是官网上的(老的,官网那个文档没有更新),可以参考下,需要修改的就是红线框圈出的两处。

修改完babel.config.js配置文件后,最好重启一下服务,在vscode终端输入:

npm run serve

2.按需引入

在main.js中引入

//按需引入ElementUI组件库
import{Button,Row,DatePicker} from 'element-ui'

//需要哪个引入哪个
Vue.component(Button.name, Button);
Vue.component(Row.name, Row);

3.使用
和上述App.vue中的内容一样。

posted @ 2022-04-14 15:12  wanpi  阅读(3120)  评论(0编辑  收藏  举报