VUE - 局部引用Element-UI组件

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

posted @   无心々菜  阅读(122)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示