element-plus自动按需导入及出错解决

最新推荐文章于 2024-07-23 09:40:49 发布

同心绾

最新推荐文章于 2024-07-23 09:40:49 发布

阅读量2.8k

点赞数 1

本文链接：https://blog.csdn.net/qq_51470342/article/details/125675033

版权

Element Plus 自动导入样式不生效 webpack babel.config.js

关键词由CSDN通过智能技术生成

自动按需导入官网教程
首先：npm install -D unplugin-vue-components unplugin-auto-import
然后配置webpack.config.js

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

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

也可以直接配置babel.config.js，但是如果安装版本过高可能在配置时会报错，所以安装指定版本

npm i element-plus@1.0.2-beta.28

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'element-plus',
        customStyleName: (name) => {
          return `element-plus/lib/theme-chalk/${name}.css`
        }
      }
    ]
  ],
}