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

补充:elementPlus图标自动引入

首先安装插件

npm i -D unplugin-icons unplugin-vue-components

下载图标库

npm i @element-plus/icons-vue

配置vite.config.js

import path from 'path'
import {
  defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import {
  ElementPlusResolver
} from 'unplugin-vue-components/resolvers'
const pathSrc = path.resolve(__dirname, 'src')
export default defineConfig({
  esolve: {
    alias: {
      '@': pathSrc,
    },
  },
  plugins: [
    vue(),
    AutoImport({
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          prefix: 'Icon',
        }),
      ],
      dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
    }),
    Components({
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          enabledCollections: ['ep'],
        })
      ],
      dts: path.resolve(pathSrc, 'components.d.ts'),
    }),
    Icons({
      autoInstall: true,
    }),
  ]
})

总结

到此这篇关于element-plus自动导入和按需导入的文章就介绍到这了,更多相关element-plus自动导入和按需导入内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • element-plus中如何实现按需导入与全局导入

    目录 按需导入: 全局导入 按需导入: 安装插件 首先需要引入额外的插件:前**vite-plugin-components已重命名为unplugin-vue-components** npm install unplugin-vue-components 配置插件 在weapack或vite配置文件内中添加配置 // vite.config.ts import Components from 'unplugin-vue-components/vite' import { ElementPlus

  • Vue3+Element-plus项目自动导入报错的解决方案

    目录 前言 安装步骤 1.安装插件 2.vue.config.js 设置 3.npm run serve 出错 解决方案 1.问题原因 1.1 unimport 包报错 1.2 node.js 和 npm 版本过低 2.解决方法 2.1 降低 unplugin-auto-import 插件版本 2.2 升级 node.js 和 npm 版本 补充:element-plus自动按需导入及出错解决 总结 前言 在创建 Vue3 + Element-plus 项目时,根据 Element-plus 文

  • element-plus的自动导入和按需导入方式详解

    element-plus根据官网文档,推荐用户采用按需导入的方式进行导入. 我的项目是使用vite进行构建的,根据官网的文档,利用unplugin-vue-components插件进行自动按需导入. 当我们使用element的标签时,无需再使用import对组件进行导入. 例如: <el-button>test</el-button> 会自动引入ElButton组件. 不过当我们想要使用命令的方式创建element组件时,样式会无法自动引入. 我们以ElMessage为例. imp

  • 对Python模块导入时全局变量__all__的作用详解

    Python中一个py文件就是一个模块,"__all__"变量是一个特殊的变量,可以在py文件中,也可以在包的__init__.py中出现. 1.在普通模块中使用时,表示一个模块中允许哪些属性可以被导入到别的模块中, 如:全局变量,函数,类.如下,test1.py和main.py test1.py __all__=["test"] def test(): print('----test-----') def test1(): print('----test1----

  • 使用go module导入本地包的方法教程详解

    go module 是Go1.11版本之后官方推出的版本管理工具,并且从 Go1.13 版本开始, go module 将是Go语言默认的依赖管理工具.到今天 Go1.14 版本推出之后 Go modules 功能已经被正式推荐在生产环境下使用了. 这几天已经有很多教程讲解如何使用 go module ,以及如何使用 go module 导入gitlab私有仓库,我这里就不再啰嗦了.但是最近我发现很多小伙伴在群里问如何使用 go module 导入本地包,作为初学者大家刚开始接触package的

  • JMeter导入自定义的Jar包的详解教程

    1.简介 原计划这一篇是介绍前置处理器的基础知识的,结果由于许多小伙伴或者童鞋们在微信和博客园的短消息中留言问如何引入自己定义的Jar包呢???我一一回复告诉他们和引入插件的Jar包一样的道理,一通百通.但是感觉他们还是很迷糊很迷惘,因此在这里穿插一篇导入自定义的Jar包.还有另外一个原因就是前置处理器会用到这个自定义的Jar包. 2.环境准备 (1)Eclipse 我们要引入自定义的Jar包,所以你需要一个可以编写脚本生成Jar的工具,当然了你可以选择其他的开发工具,宏哥这里选择Eclipse

  • Oracle 批处理自动备份bat脚本语句的步骤详解

    开门见山 1.备份的语句能执行 2.创建一个检单bat脚本能执行 3.把备份的语句放到bat 脚本里面 示例 @echo off echo 正在备份 Oracle 数据库,请稍等-- set expname=%date:~0,4%%date:~5,2%%date:~8,2% expdp 用户名/密码@orcl schemas=导出的用户 directory=备份的文件夹 dumpfile=%expname%.dmp logfile=%expname%.log 步骤 1.备份语句 确保导出的语句能

  • Pycharm创建python文件自动添加日期作者等信息(步骤详解)

    第一步 找到 Preferences,点击进入.进入后找到 Editor – File and Code Templates – Python Script . 第二步 添加自己所需要的信息 第三步 添加完成后,点击 OK 键进行保存. 新建python文件就会看到已添加的默认信息. 常用配置 #-- coding: utf-8 -- #@Time : ${DATE} ${TIME} #@Author : XXXX #@Email : XXXX@qq.com #@File : ${NAME}.p

  • vue导入处理Excel表格功能步骤详解

    目录 1. 前言 2.vue导入Excel表格 2.1 使用ElementUI中的upload组件 2.2 使用input文件上传 3. 总体代码与效果 4. 总结 1. 前言 最近遇到前端导入并处理excel表格的情况,趁此机会刚好研究一下vue导入并处理excel数据:当然自己手撸一个工具没有那么多时间,本文只是借助现有的工具来做一下工具使用总结. 2.vue导入Excel表格 vue导入Excel表格主要有两种常用的方法,一个是借助ElementUI文件上传进行表格导入,另一个是自带的in

  • Vue项目代码之路由拆分、Vuex模块拆分、element按需加载详解

    目录 路由的拆分 VUEX模块拆分 Element UI库按需加载的优雅写法 路由的拆分 项目较大路由较多时,路由拆分是一个不错的代码优化方案,按不同业务分为多个模块,结构清晰便于统一管理. require.context() 是webpack提供的语法, 相当于前端的读写文件,返回的 files是一个函数,files.keys()执行,返回获取到的文件名(是一个数组),再通过files(keys)获取到模块,取到default 属性,拿到真正的导出对象. /router/home.router

  • MySQL高效导入多个.sql文件方法详解

    MySQL有多种方法导入多个.sql文件(里面是sql语句),常用的有两个命令:mysql和source. 但是这两个命令的导入效率差别很大,具体请看最后的比较. (还有sqlimport和LOAD DATA INFILE等导入方法,不过它们主要用于导入.csv或.xml文件数据,不是.sql文件) 假设我们有一个 users.sql 大文件,为方便我们将其拆分成:user1.sql.user2.sql.user3.sql 三个独立的小sql文件. 1.mysql命令导入 mysql命令导入多个

  • db2 导入导出单个表的操作详解

    1.导出整个数据库表结构.方法.存储过程等,执行脚本: db2look –d dbname –e –o db.sql –i username –w password db2 -tvf db.sql 2.单表数据的导出及导入: 导出:db2move dbname export -tn tablename -u db2user -p psw 导入:db2move dbname import -u db2user -p psw 3.数据库的备份.恢复: 备份:db2 BACKUP DATABASE d

随机推荐