unplugin-vue-components

unplugin-vue-components 是一个用于 Vue.js 的自动化组件导入插件，它支持与多种 UI 库和插件集成，以简化组件注册和使用流程。以下是一些它可以引入或支持的常见插件和 UI 库：

以下是一个在 Vue 2.7.16 + Element-UI 2.15.14 环境中使用 unplugin-vue-components 实现组件自动导入的简明实例：

1. 安装依赖

npm install [email protected] [email protected] --save-dev

2. 配置 vue.config.js（Webpack 项目）

// vue.config.js
//"unplugin-vue-components": "^0.26.0"
const Components = require("unplugin-vue-components/webpack");//^0.26.0：需要.default
const { ElementUiResolver } = require("unplugin-vue-components/resolvers");

//目前无作用，并且会引起打包变大，暂时不使用unplugin-vue-components
function resolvers() {
  return Components({
    resolvers: [
      // Vue2 + ElementUI 专用配置
      ElementUiResolver({
        //对目前压缩无作用
        //importStyle: false,
        importStyle: (name) => {
          //无作用：显式指定 message 样式路径
          // if (name === "message") {
          //   return "element-ui/lib/theme-chalk/message.css";
          // }
          return `element-ui/lib/theme-chalk/${name}.css`;
        }, //动态加载
        // importStyle: "css", // 必须使用 css 格式 加载整个
        // libraryName: "element-ui", // 明确指定库名
        // libraryDirectory: "lib", // 组件目录
        // camel2Dash: true, // 驼峰转短横线命名
        // styleLibraryName: "theme-chalk", // 样式库名
        // //可选：排除组件（如排除 Icon）
        // exclude: [/^ElIcon/],
      }),
    ],
    // dirs: ["src/components"], // 本地组件目录
    // dts: "src/components.d.ts", // 类型声明文件
    // extensions: ["vue", "tsx"], // 支持的文件扩展名
    // deep: true, // 递归扫描子目录
    // directoryAsNamespace: false, // 禁用目录作为命名空间
  });
}

module.exports = {
  configureWebpack: {
     plugins: [resolvers()]
  }
}

3. 关键说明

使用 ElementUIResolver 自动导入（需额外配置）

// main.js
// import ElementUI from "element-ui";
// Vue.use(ElementUI);
import { Message } from "element-ui";
Vue.prototype.$message = Message;

⚠️ 常见误区

• ❌ 错误认知：ElementUIResolver 会自动安装所有 ElementUI 功能
• ✅ 正确认知：ElementUIResolver 仅自动导入组件，插件需手动安装

• import "https://unpkg.com/element-ui/lib/theme-chalk/index.css";//使用CDN对压缩无用,反而有可能打包变大