Element UI 组件的安装及使用

723z2024-02-25 17:57

Element UI是基于Vue.js 的一套企业级的前端UI 组件库，它包含了丰富的UI组件供开发者使用，极大的提高生产效率。这篇文章将帮你快速了解Element UI的安装和使用。

一、安装 Element UI

首先，你需要在你的环境中安装Node.js，因为我们将使用其内置的包管理器npm来安装我们的UI库。

打开命令行工具并确保你的环境中已安装vue-cli 工具，如果没有的话，需要前全局安装:

shell 复制代码

npm install -g @vue/cli

接着，我们创建一个新的Vue.js项目:

shell 复制代码

vue create element-demo

然后进入到该项目的目录：

shell 复制代码

cd element-demo

执行下列命令，安装 Element UI 库：

shell 复制代码

npm i element-ui -S

至此，Element UI就成功地安装在了你的项目之中。

二、配置及引入 Element UI

在项目中main.js，通过全局方式引入Element UI和它的样式表:

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 UI 组件

在App.vue中，我们可以直接使用Element UI的已有组件。在这里，我们添加了一个按钮和一个弹窗：

html 复制代码

<template>
  <div>
    <el-button type="primary" @click="visible = true">打开消息框</el-button>
    <el-dialog title="消息" :visible.sync="visible">
      欢迎使用Element UI
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="visible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    }
  }
}
</script>

这样，只要我们在浏览器上打开我们的网页，然后点击"打开消息框"按钮，就会看到一个欢迎你使用Element UI的弹窗。

Element UI组件库中的组件种类丰富，无论是开发复杂的管理平台还是一个简单的Web页面，都可以为你提供很大的便利，非常值得学习和使用。