element-plus按需引入配置

npm install element-plus --save
npm install -D unplugin-vue-components unplugin-auto-import

<el-button type="primary">Primary</el-button>
<el-input v-model="input" placeholder="Please input" />

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

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

实际体验就是:vue3.0的js模式不安装 unplugin-auto-import 也没什么问题
ts格式在运行npm run serve的时候自动创建 auto-imports.d.ts、components.d.ts
需要验证 auto-imports.d.ts 是否可有可无,components.d.ts 能否独立完成分析和引入

按需引入目前的情况是正如上面猜测的一样 unplugin-auto-import 是没用的,只用到了 unplugin-vue-components,而且只有在ts模式下才会生成 auto-imports.d.ts、components.d.ts 这两个文件
按需引入还必须在 main.ts 中引入样式,即 import 'element-plus/dist/index.css',否则弹框等样式失效

posted @ 2022-11-11 11:21  怪诞咖啡  阅读(1059)  评论(0编辑  收藏  举报