ElementUI的简单使用方法讲解

这里我们以引入button按钮为例   其实很多表单 或者 时间 等等的组件 引入方式都是一样的

举一反三吧.

首先 yarn add element-ui -S 让我们来安装这个包

main.js 全局注册 element-ui这个组件

// 完整引入,main.js写入以下代码
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

这样 我们就可以在App里面使用 这个组件了  

ElementUI的简单使用方法讲解_第1张图片

 比如你想要第一列的按钮  

那么你就复制下来 放到App.vue内

 


  默认按钮
  主要按钮
  成功按钮
  信息按钮
  警告按钮
  危险按钮

ElementUI的简单使用方法讲解_第2张图片

 这样 我们简单的按钮 就引入完成了 而且这种图片 它自带的点击高亮等等特性 也是很厉害的.

效果图如下

ElementUI的简单使用方法讲解_第3张图片

 接下来演示一个表单项引入吧

ElementUI的简单使用方法讲解_第4张图片

比如这个表单 你想要引入  那么也要把它的代码复制下来






 因为涉及到一些 需要vue变量  所以这里把 整段全弄下来

而你想要什么样的内容 就适当的删除 或者粘贴就可以了

我们是cv工程师.....

ElementUI的简单使用方法讲解_第5张图片

 就是这么简单~  如果想看验证规则设置的话 可以对照着 element-ui的文档 或者我之前发布的文章来修改 有自定义规则等等的~

你可能感兴趣的