使用ElementUI组件库

引入ElementUI组件库

1.安装插件

复制代码
npm i element-ui -S

2.引入组件库

复制代码
import ElementUI from 'element-ui';

3.引入全部样式

复制代码
import 'element-ui/lib/theme-chalk/index.css';

4.使用

复制代码
Vue.use(ElementUI);

5.在官网寻找所需样式

饿了么组件官网 我这里以button为例

6.在组件中使用

复制代码
    <el-row>
      <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>
    </el-row>

按需引入

1.安装插件

复制代码
npm install babel-plugin-component -D

2.引入

复制代码
import { Button,Row } from 'element-ui';

3.使用并命名

复制代码
Vue.component(Button.name, Button)
Vue.component('rrr', Row)

4.修改babel.config.js

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

5.如果我们在命名时自定义了名字那么使用的时候就需要使用我们自定义的名字

复制代码
    <rrr>
      <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>
    </rrr>

6.如果启动时说却什么就通过npm i 进行安装

复制代码
npm i
相关推荐
海天胜景2 天前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
海天胜景2 天前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
喜欢敲代码的程序员3 天前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
华子w9089258593 天前
基于 SpringBoot+Vue.js+ElementUI 的 “花开富贵“ 花园管理系统设计与实现7000字论文
vue.js·spring boot·elementui
hackchen3 天前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
蓝胖子的多啦A梦3 天前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想3 天前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
海天胜景3 天前
vue3 el-table 列增加 自定义排序逻辑
javascript·vue.js·elementui
满楼、13 天前
el-cascader 设置可以手动输入也可以下拉选择
javascript·vue.js·elementui
海天胜景13 天前
vue3 el-table 根据字段值 改变整行字体颜色
javascript·vue.js·elementui