iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >element-plus中怎么实现按需导入与全局导入
  • 402
分享到

element-plus中怎么实现按需导入与全局导入

2023-06-21 20:06:51 402人浏览 泡泡鱼
摘要

这篇文章主要介绍了element-plus中怎么实现按需导入与全局导入,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。按需导入:安装插件首先需要引入额外的插件:前**vite-

这篇文章主要介绍了element-plus中怎么实现按需导入与全局导入,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

按需导入:

安装插件

首先需要引入额外的插件:前**vite-plugin-components已重命名为unplugin-Vue-components**

npm install unplugin-vue-components

配置插件

在weapack或vite配置文件内中添加配置

// vite.config.tsimport Components from 'unplugin-vue-components/vite'import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default {  plugins: [    // ...    Components({      resolvers: [ElementPlusResolver()],    }),  ],}
// webpack.config.jsconst Components = require('unplugin-vue-components/WEBpack')const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')module.exports = {  // ...  plugins: [    Components({      resolvers: [ElementPlusResolver()],    }),  ],}
//main.tsimport { createApp } from 'vue'import App from './App.vue'import { Edit,Search } from '@element-plus/icons'  //图标需要分开导入,按需导入图标import { ElButton } from 'element-plus';   //按需导入const app = createApp(App);//注册组件app.component("edit", Edit)app.component("search", Search)app.component('ElButton',ElButton)app.mount('#app');
<template>    <h3>home页面</h3>    <el-button type="primary" >主要按钮</el-button>    <el-button type="success" >成功按钮</el-button>    <el-icon :size="20" :color="'blue'">        <edit />    </el-icon>    <el-icon :size="20">        <search></search>    </el-icon></template><script setup lang="ts"> </script>

全局导入

推荐添加

// tsconfig.JSON{  "compilerOptions": {    // ...    "types": ["element-plus/global"]  }}

安装

npm install element-plus --save# oryarn add element-plus# 安装icon图标依赖库npm install @element-plus/icons# oryarn add @element-plus/icons

在main.ts 文件中全局配置

import { createApp } from 'vue'import App from './App.vue'import { store, key } from './store';// 注入路由import router from './router';// 全局引入ui库import ElementPlus from 'element-plus'import 'element-plus/dist/index.CSS'const app = createApp(App);app.use(store, key);app.use(router);app.use(ElementPlus);app.mount('#app');

使用ui组件

使用图标,因为图标和普通ui组件不是同一个包,使用需要分别导入

//导入具体的组件后直接使用<template>    <el-icon :size="20" :color="'blue'">        <edit />    </el-icon></template><script setup lang="ts">    import { Edit } from '@element-plus/icons'</script>

将图标库在main.ts文件中impott并使用app.component()注册便可以直接在组件中使用了,和普通的使用ui库同理

<template>    <h3>home页面</h3>    <el-button type="primary" >主要按钮</el-button>    <el-button type="success" >成功按钮</el-button>    <el-icon :size="20" :color="'blue'">        <edit />    </el-icon>    <el-icon :size="20">        <search></search>    </el-icon></template><script setup lang="ts"> </script>

感谢你能够认真阅读完这篇文章,希望小编分享的“element-plus中怎么实现按需导入与全局导入”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网精选频道,更多相关知识等着你来学习!

--结束END--

本文标题: element-plus中怎么实现按需导入与全局导入

本文链接: https://www.lsjlt.com/news/300481.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • element-plus中怎么实现按需导入与全局导入
    这篇文章主要介绍了element-plus中怎么实现按需导入与全局导入,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。按需导入:安装插件首先需要引入额外的插件:前**vite-...
    99+
    2023-06-21
  • element-plus中如何实现按需导入与全局导入
    目录按需导入:全局导入按需导入: 安装插件 首先需要引入额外的插件:前**vite-plugin-components已重命名为unplugin-vue-components** ...
    99+
    2024-04-02
  • element-plus的自动导入和按需导入方式详解
    element-plus根据官网文档,推荐用户采用按需导入的方式进行导入。 我的项目是使用vite进行构建的,根据官网的文档,利用unplugin-vue-components插件进...
    99+
    2022-11-13
    element-plus按需引入 element-plus自动导入
  • Vue3+Element Plus按需引入(自动导入)详解
    目录1 前言1.1 目的1.2 最终效果2 准备工作3 按需引入3.1 安装插件3.2 修改 vite.config.ts 文件4 其他4.1 ELMessage 弹框样式未生效4....
    99+
    2022-11-13
    element plus按需引入 vue3按需引入 vue引入
  • 怎么用Vue3和Element Plus实现自动导入
    $ pnpm i unplugin-auto-import unplugin-vue-components unplugin-icons -D3.2 修改 vite.config.ts 文件4 其他4.1 ELMessage 弹框样式未生效...
    99+
    2023-05-22
    Vue3 element plus
  • vue3怎么集成Element-plus实现按需自动引入组件
    本文小编为大家详细介绍“vue3怎么集成Element-plus实现按需自动引入组件”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue3怎么集成Element-plus实现按需自动引入组件”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢...
    99+
    2023-07-02
  • 怎么使用Java+element实现excel导入和导出
    本篇内容介绍了“怎么使用Java+element实现excel导入和导出”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!本项目是前端vue3,...
    99+
    2023-07-06
  • vue3怎么安装vant实现按需引入和全局引入
    安装在现有项目中使用 Vant 时,可以通过 npm 进行安装:Vue 3 项目,安装最新版 Vantnpm i vantVue 2 项目,安装 Vant 2npm i vant@latest-v2当然,你也可以通过 yarn 或 pnpm...
    99+
    2023-05-19
    Vue3 ant
  • element-plus按需引入后ElMessage与ElLoading在页面中的使用
    目录element-plus按需引入后ElMessage与ElLoading在页面使用按照官网按需引用element-plusElMessage与ElLoading使用问题解决找不到...
    99+
    2024-04-02
  • vue3安装vant实现按需引入和全局引入
    目录安装引入安装 在现有项目中使用 Vant 时,可以通过 npm 进行安装: Vue 3 项目,安装最新版 Vant npm i vant Vue 2 项目,安装 Vant 2 ...
    99+
    2023-05-14
    vue3 ant按需引入 vue3 ant全局引入
  • MySQL中怎么实现数据的导出与导入
    这期内容当中小编将会给大家带来有关MySQL中怎么实现数据的导出与导入,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。首先讲解mysql数据的导出。打开工具heidisql...
    99+
    2024-04-02
  • Vue3+Element-plus项目自动导入报错怎么解决
    本篇内容介绍了“Vue3+Element-plus项目自动导入报错怎么解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!前言在创建 Vue3...
    99+
    2023-07-02
  • node和ES6中模块导出与导入怎么实现
    这篇文章主要介绍“node和ES6中模块导出与导入怎么实现”,在日常操作中,相信很多人在node和ES6中模块导出与导入怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”node和ES6中模块导出与导入怎...
    99+
    2023-06-17
  • Postman中导入和导出请求怎么实现
    在Postman中导入和导出请求,可以通过以下步骤实现: 导出请求: 在Postman中选择要导出的请求,右键点击选择“Exp...
    99+
    2024-03-13
    Postman
  • vue3集成Element-plus实现按需自动引入组件的方法总结
    目录1、第一种方式,使用全局引入2、第二种方式,使用局部引入3、按需自动引入element-plus  推荐总结element-plus正是element-ui针...
    99+
    2024-04-02
  • java怎么实现导入导出功能
    在Java中,可以使用以下两种方式来实现导入和导出功能:1. 使用文件输入输出流:可以使用FileInputStream和FileO...
    99+
    2023-10-08
    java
  • Spring Boot项目怎么实现Excel导入与导出功能
    本文小编为大家详细介绍“Spring Boot项目怎么实现Excel导入与导出功能”,内容详细,步骤清晰,细节处理妥当,希望这篇“Spring Boot项目怎么实现Excel导入与导出功能”文章能帮助大家解决疑惑,下面跟...
    99+
    2023-07-02
  • Java中怎么实现静态导入
    Java中怎么实现静态导入,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。先看下面这段示例代码:public class SayHelloTe...
    99+
    2023-06-17
  • Java怎么实现Excel导入导出操作
    今天小编给大家分享一下Java怎么实现Excel导入导出操作的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。1. 功能测试1....
    99+
    2023-06-29
  • React怎么实现导入导出Excel文件
    这篇文章主要介绍“React怎么实现导入导出Excel文件”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“React怎么实现导入导出Excel文件”文章能帮助大家解决问题。表示层这里我是使用的是ant...
    99+
    2023-06-05
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作