最近看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("妙啊");
},
};
</script>
如上图所示，我想实现的效果是，代码里不写引入element的Message方法，也能正常使用Message。
一开始我是这样写的，vue.config.js：
// vue.config.js
const { defineConfig } = require("@vue/cli-service");
const AutoImport = require("unplugin-auto-import/webpack");
const Components = require("unplugin-vue-components/webpack");
const { ElementUiResolver } = require("unplugin-vue-components/resolvers");
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
configureWebpack: {
plugins: [
AutoImport({
resolvers: [
(name) => {
if (name === "Message") {
return {
from: "element-ui/lib/message.js",
};
}
},
],
}),
Components({ resolvers: [ElementUiResolver()] }),
],
},
});
发现引入不成功，不知道是怎么回事，后来换了写法：
// vue.config.js
// 省略引入部分
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
configureWebpack: {
plugins: [
AutoImport({
resolvers: [
(name) => {
if (name === "Message") {
return {
from: "element-ui",
name: "Message",
};
}
},
],
}),
Components({ resolvers: [ElementUiResolver()] }),
],
},
});
最后补充基础的样式（icon等）和Message的样式，如下
// vue.config.js
// 省略引入部分
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
configureWebpack: {
plugins: [
AutoImport({
resolvers: [
(name) => {
if (name === "Message") {
return {
from: "element-ui",
name: "Message",
sideEffects: [
"element-ui/lib/theme-chalk/base.css",
"element-ui/lib/theme-chalk/message.css",
],
};
}
},
],
}),
Components({ resolvers: [ElementUiResolver()] }),
],
},
});
效果出来了，嘿嘿
代码不引入编辑器会提示变量未定义，unplugin-auto-import也给出了解决方法，可以自动生成对应的.eslintrc文件文章来源：https://www.toymoban.com/news/detail-493562.html
// vue.config.js
// 省略引入部分
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
configureWebpack: {
plugins: [
AutoImport({
resolvers: [
(name) => {
if (name === "Message") {
return {
from: "element-ui",
name: "Message",
sideEffects: [
"element-ui/lib/theme-chalk/base.css",
"element-ui/lib/theme-chalk/message.css",
],
};
}
},
],
eslintrc: {
enabled: true, // 启用自动生成.eslintrc
},
}),
Components({ resolvers: [ElementUiResolver()] }),
],
},
});
默认路径是./.eslintrc-auto-import.json，看到有这个文件后在.eslintrc.js中引入即可，这样编辑器就不提示报错了文章来源地址https://www.toymoban.com/news/detail-493562.html
module.exports = {
// 省略其他配置项...
extends: [
// 省略其他配置项...
"./.eslintrc-auto-import.json",
],
};
到了这里，关于自动导入element-ui的Message等提示方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
