VUE中使用Element-UI

最新推荐文章于 2025-05-28 21:34:11 发布

原创最新推荐文章于 2025-05-28 21:34:11 发布 · 543 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

知识专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了如何使用npm安装Element-UI，并在Vue项目中进行配置与使用。通过实例展示了不同类型的按钮组件，包括默认按钮、主要按钮、成功按钮、信息按钮、警告按钮和危险按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Element-UI官网
首先根据官网给的安装命令安装Element-UI：npm i element-ui -S

安装完毕后引入 Element

在 main.js 中添加/修改以下内容：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  router,
  components: { App },
  render: h => h(App),
  template: '<App/>'
})

然后就可以在官网找相关组件使用就可以了

<template>
<div>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary" v-on:click="search">主要按钮</el-button>
      <el-button type="success" v-on:click="search">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  </div>
</template>