VUE3项目中按需引入元素加后使用组件时样式丢失

1个问题描述

在VUE 3项目中依据元素加官方文档按需引入后，在.vue页面中使用ElMessage、ElLoading等组件时出现样式丢失的情况.

2个引发原因

按需引入仅引入了相关组件，未引入全局样式或者按需引入组件样式.

3个解决方法

1. 安装取消插件-元素-加

   npm i unplugin-element-plus -D
   

2. 在vue.config.js中引入并配置

   // vue.config.js
   const AutoImport = require('unplugin-auto-import/webpack')
   const Components = require('unplugin-vue-components/webpack')
   const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
   // 引入unplugin-element-plus
   const ElementPlus = require('unplugin-element-plus/webpack')
   
   module.exports = {
     chainWebpack: config => {
       config
         .plugin('html')
         .tap(args => {
           args[0].title = 'xxx管理后台'
           return args
         })
     },
     configureWebpack: {
       plugins: [
         AutoImport({
           resolvers: [ElementPlusResolver()]
         }),
         Components({
           resolvers: [ElementPlusResolver()]
         }),
         ElementPlus() // 配置unplugin-element-plus
       ]
     }
   }