解决 element-plus 自动导入时的 message 等组件的使用问题

先说一下题主的环境：使用 vue-cli 创建的 vue3 项目。

这个问题说大不大，说小不小，但就是会消耗掉你一定的时间来排查，就很烦，这种本应该不会成为问题的，现在却成为了个问题。所以在此做记录，给有需要的人节省些排查时间。

需求很简单，在自动导入 element-plus 时，出现的 this.$message 不好使，甚至这样也不好使：

import { ElMessage } from 'element-plus';

ElMessage('连个消息都弹不出来');

官方文档没有对此做说明

现在咱们就来解决它。

还记得在完整引入的时候，我们是把样式也一同引入了的吗？

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

这时候 this.$message 是好使的，但是把样式注释掉后，也就不好使了，所以上面的问题很有可能就是全局注册和样式的问题。

所以需要把没有的组件全局注册一下，再把相应的样式引入进来就可以了，比如这样：

import { ElMessage, ElMessageBox } from 'element-plus';
import 'element-plus/theme-chalk/el-message.css';
import 'element-plus/theme-chalk/el-message-box.css';

export default (app) => {
  // 全局配置
  app.config.globalProperties.$ELEMENT = {};
  app.use(ElMessage);
  app.use(ElMessageBox);
};

这样就可以在组件中使用：this.$message 和 this.$confirm 了。

加餐，loading 组件不好使怎么办？

如果你是跟我一样的环境的话，v-loading="loading" 指令应该是不好使的，加上就会报 loading 样式文件找不到的错误。

解决办法是把 AutoImport 去掉就好使了，这样也不会影响之前的组件使用，所以我不太明白官方用 AutoImport 有啥用：

// const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');

module.exports = {
  configureWebpack: {
    plugins: [
      // AutoImport({
      //   resolvers: [ElementPlusResolver()]
      // }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]
  }
};