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
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」