5/09/21 记Element-ui基础用法

Element-UI 基础用法

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

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

ElementPlus(适配Vue3.0的版本)官方地址： https://element-plus.org/#/zh-CN

 

1.  安装

npm i element-ui -S

-S: 是--save的简写，表示 这个包是生产依赖， 表示项目上线也要使用这个包。

-S: 是可以省略不写的。

如果要安装开发依赖，则要加 -D。

2.  main.js中引入并注册

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

3. 使用elementUI组件

在app.vue中

<template>
  <div id="app">
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </div>
</template>

注意:

1. 组件名前面有el这个关键字

2. type属性决定了按钮的样式风格

4. 效果预览