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