VUE - 區域性引用Element-UI元件

无心々菜發表於2024-09-11
VueUI元件

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

相關文章