(10/05/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. 使用Element-UI组件

以(Button组件)为例, 直接复制到页面中
在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. 效果预览