vue-cli项目 按需引入 element-plus

说明

vue-cli创建的项目中如何按需引入element-plus，官网没有说明清楚。

具体步骤

1. 安装插件

npm install -D unplugin-vue-components unplugin-auto-import

2. 配置vue.config.js

const {defineConfig} = require('@vue/cli-service')

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,
    devServer: {
        port: 8888
    },
    configureWebpack: {
        plugins: [
            AutoImport({
                resolvers: [ElementPlusResolver()],
            }),
            Components({
                resolvers: [ElementPlusResolver()],
            }),
        ]
    }
})

新增加内容为：

测试

  Home

  
    Default
    Primary
    Success
    Info
    Warning
    Danger
    中文
  
  
  About



export default {
  name: "Home"
}

结果：