项目中如何使用Element-UI？

一、ElementUI

安装ElementUI

npm i --save element-ui
# 或者
yarn add element-ui

1.1 在项目中引入

找到main.js，引入模块和样式

import Vue from 'vue'
import App from './App.vue'
// 引入elementui
import ElementUI from 'element-ui'
// CSS可以直接通过import在组件中引入
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

// 调用Vue.use
Vue.use(ElementUI)

new Vue({
  render: h => h(App),
}).$mount('#app')

1.2 在组件中使用

在文档上找到想要使用组件代码，复制代码到我们本地组件中

<template>
  <div>
    <el-button>按钮</el-button>
  </div>
</template>

二、ElementUI如何使用

找到对应的组件文档，往最下面拉

2.1 组件名 Attributes

这里的内容表示组件标签所有可以使用的属性值（props），通过阅读文档，来了解对应的属性数据类型，可以值，以及实现的效果

参数	说明	类型	可选值	默认值
type	类型	string	primary / success / warning / danger / info / text	—

比如上面的文档告诉我们了几个信息：组件上可以使用type属性，属性值可以从primary / success / warning / danger / info / text进行选择

<!-- 这个按钮就会是success类型的按钮 -->
<el-button type="success"></el-button>

2.2 组件名 Events

表示组件标签上可以监听的自定义事件

<el-button @自定义事件名="函数"></el-button>

2.3 组件名 Methods

组件相关方法，需要我们使用组件实例对象.方法名进行调用，在这里，我们就需要学习，如果获取到组件的实例对象

通过ref可以获取到对应组件的组件实例对象

组件实例对象.方法名()