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

简介: element-plus的自动导入和按需导入

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

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

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

例如:

<el-button>test</el-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的自动导入了。当然使用命令的组件还是需要你手动导入一下的。

相关文章
|
前端开发 JavaScript
vue3.0 bpmn-js + TS 简易教程
bpmn.js是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成. 这里主要记录本人在开发bpmn中的流程
1562 0
|
程序员 人工智能 Serverless
通义灵码保姆级教程:官网、安装、使用指南、常见问题、线上活动、官方答疑
通义灵码保姆级教程:官网、安装、使用指南、常见问题、线上活动、官方答疑
21717 1
|
Web App开发 域名解析 缓存
如何在 Ubuntu 20.04 上安装 Node.js 和 npm
本文我们主要为大家介绍在 Ubuntu 20.04 上安装 Node.js 和 npm 的三种不同的方式。
163048 7
如何在 Ubuntu 20.04 上安装 Node.js 和 npm
|
JavaScript API C++
Vue项目中的文件/文件夹命名规范
文件或文件夹的命名遵循以下原则: index.js 或者 index.vue,统一使用小写字母开头的(kebab-case)命名规范 属于组件或类的,统一使用大写字母开头的(PascalCase)命名规范 其他非组件或类的,统一使用小写字母开头的(kebab-case)命名规范 1.
17815 0
|
JavaScript
typeScript基础(3)_ts函数默认值和可选参数
本文介绍了在TypeScript中如何使用函数的默认值和可选参数。展示了如何为函数参数指定默认值,使得在调用函数时可以省略某些参数,以及如何定义可选参数。
871 2
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
2235 1
|
容器
Element el-container 布局容器组件详解
本文目录 1. 背景 2. 全局样式 3. 布局代码 4. 增加导航菜单 5. 小结
3152 0
Element el-container 布局容器组件详解
|
JavaScript
vue项目中引入阿里图标iconfont
该文章指导如何在Vue项目中引入并使用阿里图标库Iconfont,包括图标的选取、下载配置文件及在项目中引入和使用图标的具体步骤。
|
JavaScript 前端开发 索引
Vue3 + Vite项目实战:常见问题与解决方案全解析
Vue3 + Vite项目实战:常见问题与解决方案全解析
966 0
|
11月前
|
SQL 前端开发 关系型数据库
SpringBoot使用mysql查询昨天、今天、过去一周、过去半年、过去一年数据
SpringBoot使用mysql查询昨天、今天、过去一周、过去半年、过去一年数据
317 9