vuecli简单整合elementUi_vuecli结合elementui-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_50210478/article/details/119736316

本文介绍了如何在Vue CLI项目中按需引入Element UI组件，如Button、Form等，并展示了如何在Vue实例中挂载消息提示和确认框。通过实例演示了消息提示和确认对话框的使用。

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

导入

vuecli在文件中安装elementUi插件

npm install element-ui -S

或者在ui插件界面，安装element-ui

安装后，在plugins中会发现，element.js文件

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

Vue.use(Element)

此种方式是引入了所有的element插件，但是事实上我们可能只需要一部分:

import Vue from 'vue'
import Vue from 'vue'
import {
  Button,
  Form,
  FormItem,
  Upload
} from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Upload)
//将弹框组件挂载到Vue对象中 用户可以使用this关键字调用
Vue.prototype.$message = Message
//通过MessageBox函数定义 消息提示框
Vue.prototype.$confirm = MessageBox.confirm

调用

简单的使用我就不说了，因为人家开发文档写的很全。
我这里仅仅对我写的后两个做一个简单的使用。

		//消息提示框
		this.$message.success("更新状态成功")
       //消息确认框
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
         console.log('点击确定')
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });