element-plus的自动导入和按需导入

element-plus根据官网文档,推荐用户采用按需导入的方式进行导入。

我的项目是使用vite进行构建的,根据官网的文档,利用unplugin-vue-components插件进行自动按需导入。

当我们使用element的标签时,无需再使用import对组件进行导入。

例如:

<el-button>testel-button>

会自动引入ElButton组件。
在这里插入图片描述
不过当我们想要使用命令的方式创建element组件时,样式会无法自动引入。

我们以ElMessage为例。

import { ElMessage } from 'element-plus'

ElMessage.warning('warning')

如果不采用import的方式引入,会直接报错:ElMessage没有定义。所以这个import是省不了了。但是import了之后,消息弹窗是出来了,但是却没有样式。这该怎么办呢?

仔细阅读文档,我们可以发现在手动导入里,使用了一个叫unplugin-element-plus的插件。该插件的官方文档有详细的使用说明,插件的主要功能如下:

import { ElButton } from 'element-plus'

//    ↓ ↓ ↓ ↓ ↓ ↓

import { ElButton } from 'element-plus'
import 'element-plus/es/components/button/style/css'

我们可以看出,这个插件其实就是把你需要的组件的css或者sass文件自动引入进来,刚好弥补了上面的问题。

最后我们如下配置项目:

首先我们要安装unplugin-vue-componentsunplugin-element-plus

npm i unplugin-vue-components unplugin-element-plus -D

之后配置一下vite.config.js文件。

import ElementPlus from 'unplugin-element-plus/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    ElementPlus({
      importStyle: 'sass',
      useSource: true
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ]
})

这样配置之后,我们就可以享用element-plus的自动导入了。当然使用命令的组件还是需要你手动导入一下的。

最后记录一个宝藏文章:
尤大推荐的神器unplugin-vue-components,解放双手!以后再也不用呆呆的手动引入(组件,ui(Element-ui)库,vue hooks等)

你可能感兴趣的:(前端,#,Vue,javascript,css,vue.js)