首页 > 其他分享 >VUE - 局部引用Element-UI组件

VUE - 局部引用Element-UI组件

时间:2024-09-11 09:05:38浏览次数:11  
标签:VUE lib element chalk theme ui UI import Element

VUE - 局部引用Element-UI组件

1. 安装插件

npm i element-ui

 

2. 全局安装

在main.js中

import Vue from 'vue'
import App from './App.vue'

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

Vue.use(ElementUI);

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

 

 

3. 局部安装

 安装插件

npm install babel-plugin-component -D

 

 

修改文件:babel.config.js (如没有新建一个)

module.exports = {
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk",
      },
    ],
  ],
  presets: ["@vue/cli-plugin-babel/preset"],
};

 

 

在页面中使用

<template>
  <div>
    <el-button @click="openMessage" type="success" plain size="small"
      >打开消息提示</el-button
    >
  </div>
</template>

<script>
import { Button, Message } from "element-ui";
import "element-ui/lib/theme-chalk/button.css";
import "element-ui/lib/theme-chalk/message.css";
// import 'element-ui/lib/theme-chalk/index.css';

export default {
  name: "uncc",

  components: {
    "el-button": Button,
  },
  methods: {
    openMessage() {
      Message.success("这是一条消息提示");
    },
  },
};
</script>

 

 

测试

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

end

标签:VUE,lib,element,chalk,theme,ui,UI,import,Element
From: https://www.cnblogs.com/1285026182YUAN/p/18407622

相关文章

  • 使用Vue3.5的onWatcherCleanup封装自动cancel的fetch函数
    前言在欧阳的上一篇这应该是全网最详细的Vue3.5版本解读文章中有不少同学对Vue3.5新增的onWatcherCleanup有点疑惑,这个新增的API好像和watchAPI回调的第三个参数onCleanup功能好像重复了。今天这篇文章来讲讲新增的onWatcherCleanup函数的使用场景:封装一个自动cancel的fetch函......
  • springboot+vue疫情防控物业信息采集系统【程序+论文+开题】计算机毕业设计
    系统程序文件列表开题报告内容研究背景随着全球疫情的持续影响,物业管理作为社区疫情防控的第一线,其重要性日益凸显。传统物业管理方式在面对疫情时,往往存在信息采集不全、效率低下、响应滞后等问题,难以有效支撑精准防控的需求。因此,开发一套高效、智能的疫情防控物业信息采......
  • springboot+vue有机农场客户关系管理系统的设计与实现【程序+论文+开题】计算机毕业设
    系统程序文件列表开题报告内容研究背景随着消费者对食品安全及健康饮食需求的日益增长,有机农场作为提供无污染、纯天然农产品的重要基地,其市场地位日益凸显。然而,传统农场管理模式在面对日益复杂的客户群体、多样化的需求及高效运营要求时显得力不从心。特别是在客户关系管......
  • springboot+vue学生公寓报修管理系统【程序+论文+开题】计算机毕业设计
    系统程序文件列表开题报告内容研究背景随着高校规模的不断扩大,学生公寓作为学生学习与生活的重要场所,其设施设备的维护与管理日益成为高校后勤服务的重要环节。传统的学生公寓报修方式往往依赖于纸质登记或口头报告,这种方式不仅效率低下,易导致信息丢失或延误处理,还难以对维......
  • springboot+vue诊所预约系统【程序+论文+开题】计算机毕业设计
    系统程序文件列表开题报告内容研究背景随着医疗服务的日益普及和民众健康意识的增强,传统诊所面临的就诊高峰、资源分配不均及患者等待时间长等问题日益凸显。特别是在大城市,优质医疗资源尤为紧张,患者往往需要提前数天甚至数周排队挂号,极大地影响了就医体验和医疗效率。在此......
  • 利用AI驱动智能BI数据可视化-深度评测Amazon Quicksight(一)
    项目简介随着生成式人工智能的兴起,传统的BI报表功能已经无法满足用户对于自动化和智能化的需求,今天我们将介绍亚马逊云科技平台上的AI驱动数据可视化神器–Quicksight,利用生成式AI的能力来加速业务决策,从而提高业务生产力。借助Quicksight中集成的AmazonQ的创作功能,业务......
  • Vue 表单输入绑定与 TypeScript:提升前端表单输入的可靠性
    ......
  • Vue 方法与事件处理与 TypeScript:增强前端应用的交互性
    ......
  • Vue双向数据绑定代码解读
     Vue核心基础-CSDN博客数据双向绑定原理_哔哩哔哩_bilibili原理示意图 前置知识reduce()方法用于链式获取对象的属性值Object.defineProperty()方法Object.defineProperty(obj,prop,descriptor)obj:要定义属性的对象。prop:要定义或修改的属性的名称或Symbol......
  • Python Pyqt5 将ui文件转换成py文件
    命令行pyuicyour_ui_file.ui-ooutput_file.py如果是虚拟环境,则需要提前进入虚拟环境中执行pyuic命令uitopy文件的使用如果是ui文件转换过来的py文件,不要直接在此py文件中编写代码。如果你的ui文件发生变换就需要重新生成py文件,这个时候新的py文件就会覆盖历史的。正确使......