自动导入element-ui的Message等提示方法

帅气小军二代

已于 2022-09-22 14:41:48 修改

阅读量1.3k

点赞数

分类专栏： Vue 文章标签： javascript vue.js elementui webpack

于 2022-09-22 14:09:31 首次发布

本文链接：https://blog.csdn.net/qq_39730030/article/details/126990272

版权

最近看element-plus文档的时候发现了组件可以自动导入，详情见这里，使用的是unplugin-vue-components和unplugin-auto-import。
其实element-ui也是支持的，unplugin-vue-components的文档有说明。
对于element-ui，只是引入组件的话，还不需要引入unplugin-auto-import。一些提示方法，如Message，其实手动引一次也很方便。不过我在看unplugin-auto-import的文档的时候，发现了一些有趣的东西：
在这里插入图片描述
可以省略掉import，那Message这些不就也能自动引入了？项目中我是没这样搞，这只是我想玩一下，实现这种效果。

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
     
  name: "HomeView",
  components: {
     
    HelloWorld,
  },
  created() {
     
    console.log(Message);
    Message("妙啊");
  },
};