Element plus 按需加载

官网介绍了两种按需加载的方式：自动和手动。

从体验来说，当然是自动加载比较方便。

自动加载使用的是插件：

yarn add unplugin-vue-components

然后只需要像全局引入那样在页面使用组件就可以。插件会分析你用到的组件，然后引入相关组件。

但理想与现实总是有出入的，特别是我——经常磕磕绊绊。有顺利过吗？😂

ElMessage 样式异常

大部分组件样式都是正常的，但 message 这类通过 api 调用的就没有样式。因为页面模板部分并没有 <el-messsage> 这样的代码，插件就不会引入相关样式。所以这种组件的样式需要手动引入：

// main.js
import "element-plus/es/components/message/style/index";

@element-plus/icons 图标组件报错

如果按照正常引入使用是没有问题的。比如：

import { Menu, Search } from "@element-plus/icons";

但如果重命名为以 el- 开头就会导致找不到样式文件。因为自动引入插件会以为这个组件是 element-ui 里面的，会到这个包里找样式。

另外，关于上面这个 Menu 图标标签的书写。一般来说，在 vue 里不管是原生标签还是自定义的组件，我都是用的小写连字符（kebab case），但这个 Menu 组件不能小写，否则会出现 Menu 组件注册但未使用的提示。不知道为什么。所以只能这个组件特殊一点，大写开头。

组件显示的英文

因为我自己的 demo 用的组件都是按钮这类的简单组件，不包含默认文字的。所以没有出现默认英文的情况。不过出现这种情况也不意外，antd 默认就是英文。改成中文就是了。

<!-- App.vue -->
<template>
  <el-config-provider :locale="locale">
    <router-view/>
  </el-config-provider>
</template>

<script lang="ts">
  import { ElConfigProvider } from 'element-plus'
  import zhCn from 'element-plus/lib/locale/lang/zh-cn'

  export default {
    components: {
      [ElConfigProvider.name]: ElConfigProvider
    },
    setup() {
      
      // 切换为中文
      let locale = zhCn

      return {
        locale
      }
      
    }
  }
</script>

// 来自掘金--锦岁：https://juejin.cn/post/6999826831054471198