首页教程软件教程正文

ElmentUI入门（1）——使用vue-cli集成ElementUI环境搭建步骤

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 937 浏览 1597 个字

摘要 :

一、初识ElmentUI 1、介绍 Element-UI 是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是 Mint UI。 2、官网 ElementUI官网：https://eleme……

一、初识ElmentUI

1、介绍
Element-UI 是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是 Mint UI。

2、官网
ElementUI官网：https://element.eleme.cn/
官网使用教程：https://element.eleme.cn/2.0/#/zh-CN/component/installation

二、vue–cli 集成ElementUI
1、说明：

1、官网使用教程中，具体介绍了各种安装方式，以及所有相关的组件，我们可以直接参考官网教程中的案例去学习即可，这篇文章我们主要就是介绍下如何去使用vue-cli集成ElementUI的开发环境。

2、想要使用vue-cli集成ElementUI的开发环境就必须先掌握vue-cli的使用，具体参考文章：Vue系列入门教程（6）——vue-cli脚手架

2、集成步骤：

1、使用vue-cli创建名为first-app的vue项目。

2、打开first-app的终端，执行如下指令安装Element-UI：

npm i element-ui

3、完整引入整个 Element，修改 main.js 内容如下：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

Vue.use(ElementUI)

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

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。如果想按需引入直接参考官方文档快速上手。
4、修改App.vue如下：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <!-- Element-UI提供的按钮组件 -->
    <el-button type="primary" plain @click="handleClick">ElementUI主要按钮</el-button>
  </div>
</template>

<script>

export default {
  name: 'App',
  methods:{
        handleClick () {
          // Element-UI提供的通知方法$notify()
          this.$notify({
            title: 'ElementUI成功工作',
            type: 'success',
            message: '我们已经成功引使用了ElementUI',
            duration: 5000
          })
        }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4、在终端执行如下指令运行：