vue3 + TS + vue-cli 实现element-plus 按需引入

^O^所谓

已于 2023-02-09 01:33:57 修改

阅读量752

点赞数 3

分类专栏：配置问题文章标签： vue.js javascript 前端

于 2023-02-09 01:23:40 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42206375/article/details/128945916

版权

配置问题专栏收录该内容

3 篇文章

订阅专栏

文章讲述了在使用unplugin-auto-import插件时遇到的与ElementPlus不兼容的问题，特别是版本0.13.0导致的错误。通过降级unplugin-auto-import到0.7.1版本可以解决。此外，文中还提到了自动导入功能的配置，以及为实现按需加载ElementPlus组件和图标所需的Vue配置。在样式方面，需要在main.ts中引入ElementPlus的CSS来修复错乱。对于图标问题，文章提到了unplugin-icons的使用，并指出了正确使用图标组件的语法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

unplugin-auto-import 的坑

在这里插入图片描述
正常我们npm 了这个两个插件后，是安装最新版本的，但是unplugin-auto-import ^0.13.0 这个版本是会有问题的，好像跟element-plus出现不兼容的问题，就会出现下面这个错误
Error: Cannot find module ‘node:module’

解决方法：

unplugin-auto-import ^0.7.1
把这个版本降下来就好了！

vue-cli的配置文件vue-config-js 配置这两个plugin 的坑

在这里插入图片描述

也就是这样：

并没有出来效果

解决方案：

configureWebpack: {
    plugins: [
      AutoImport({
        // Auto import functions from Vue, e.g. ref, reactive, toRef...
        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        imports: ["vue"],

        // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
        // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
        resolvers: [
          ElementPlusResolver(),

          // Auto import icon components
          // 自动导入图标组件
          // IconsResolver({
          //   prefix: "Icon",
          // }),
        ],
      }),

      Components({
        resolvers: [
          // Auto register icon components
          // 自动注册图标组件
          // IconsResolver({
          //   enabledCollections: ["ep"],
          // }),
          // Auto register Element Plus components
          // 自动导入 Element Plus 组件
          ElementPlusResolver(),
        ],
      }),
    ],
  },

实现按需加载后，样式错乱问题

解决方案：嘚在main.ts中引入
import “element-plus/dist/index.css”;

icon引入问题

在vue.config.js 文件中

const Icons = require("unplugin-icons/webpack");
const IconsResolver = require("unplugin-icons/resolver");
const AutoImport = require("unplugin-auto-import/webpack");
const Components = require("unplugin-vue-components/webpack");
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      AutoImport({
        // Auto import functions from Vue, e.g. ref, reactive, toRef...
        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        imports: ["vue"],

        // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
        // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
        resolvers: [
          ElementPlusResolver(),

          // Auto import icon components
          // 自动导入图标组件
          IconsResolver({
            prefix: "Icon",
          }),
        ],
      }),

      Components({
        resolvers: [
          // Auto register icon components
          // 自动注册图标组件
          IconsResolver({
            enabledCollections: ["ep"],
          }),
          // Auto register Element Plus components
          // 自动导入 Element Plus 组件
          ElementPlusResolver(),
        ],
      }),
      Icons({
        autoInstall: true,
      }),
    ],
  },
});

主要是：

<!-- icon 嘚用这标签才生效 -->
      <i-ep-search></i-ep-search>

<!-- 都是无效的 -->
<!-- <el-icon :size="20">
    <Edit />
</el-icon> -->
<!-- <div style="font-size: 14px">
  <Edit style="width: 1em; height: 1em; margin-right: 8px" />
</div> -->