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',否则弹框等样式失效