Vue3.x中使用element-plus的各种方式详解

目录
  • 安装element-plus
  • 方式一、全局引入element-plus
  • 方式二、单个组件中使用
  • 方式三、经过自己封装按需引入
    • 1.在项目的src目录下建一个文件夹 global
    • 2.register-element.ts代码如下
    • 3.index.ts代码如下
    • 4.main.ts中引入

安装element-plus

element-plus

// NPM
 npm install element-plus --save
// Yarn
 yarn add element-plus
// pnpm
 pnpm install element-plus

方式一、全局引入element-plus

在main.ts 中全局注册，这种方式引入后，在全局中使用都不需要 import 就可以直接使用

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)

方式二、单个组件中使用

直接在该组件中引入相应的组件，进行使用，这种在项目中一般比较少用到

<template>
  <el-config-provider>
    <app />
  </el-config-provider>
</template>
<script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'
import {}//引入相应组件的css样式和基本样式
export default defineComponent({
  components: {
    ElConfigProvider,
  }
})
</script>

方式三、经过自己封装按需引入

1.在项目的src目录下建一个文件夹 global

该文件夹下可以添加很多全局引入的一些设置，添加默认入口 index.ts和具体组件代码文件register-element.ts

2.register-element.ts代码如下

import { App } from 'vue'
import 'element-plus/dist/index.css'
import { ElButton, ElForm, ElMenu } from 'element-plus' //项目中用到哪些组件就往里添加就OK了
const components = [ElButton, ElForm, ElMenu]
export default function (app:App):void{
  for (const component of components) {
    app.component(component.name, component)
  }
}

3.index.ts代码如下

import { App } from 'vue'
import registerElement from './register-element'
export function globalRegister (app:App):void{
  app.use(registerElement)
}

4.main.ts中引入

import { globalRegister } from './global'
const app = createApp(App)
app.use(globalRegister)

大型项目中基本都是使用自己封装的这种方式。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用vue3.x+vite+element-ui+vue-router+vuex+axios搭建项目

    使用vue3.x+vite+element-ui+vue-router+vuex+axios搭建项目

    目录 一. 参考文档 二. vite搭建项目 三. 配置element-ui 四. 配置vue-router 五. 配置vuex 安装 六. 配置axios 七. 总结 一. 参考文档 vite官方文档 vue3.x官方文档 vue-router4.x官方文档 vuex4.x官方文档 element-ui3.x官方文档 Ant Design Vue2.x官方文档 axios文档 二. vite搭建项目 安装 # npm 安装 npm init vite@latest # yarn 安装 yarn

  • element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)

    element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)

    突然发现已经半年没更新的element-ui更新了 更新了什么还不清楚,但是告知了基于vue3.x版本的 element-plus 已经出来了. 先来上手体验一下 首先安装一个最新的@vue-cli,搭建一个vue3.x的项目,脚手架创建流程已经很简洁了,这里就不多说了.建好之后,直接开始安装吧 npm i element-plus 为了方便,直接采取全部引入的方式 src/plugins/element.ts import ElementPlus from 'element-plus' imp

  • Vue Element前端应用开发之常规的JS处理函数

    1.常规集合的filter.map.reduce处理方法 filter函数的主要用途是对数组元素进行过滤,并返回一个符合条件的元素的数组 const nums = [10,20,30,111,222,333] let newNums=nums.filter(function(n){ return n<100 }) 输出: [10,20,30] map函数是对数组每个元素的映射操作,并返回一个新数组,原数组不会改变将newNums中每个数字乘2 const nums = [10,20,30,111

  • Java中遍历ConcurrentHashMap的四种方式详解

    这篇文章主要介绍了Java中遍历ConcurrentHashMap的四种方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 方式一:在for-each循环中使用entries来遍历 System.out.println("方式一:在for-each循环中使用entries来遍历");for (Map.Entry<String, String> entry: map.entrySet()) { System.out.pr

  • Spring中Bean的三种实例化方式详解

    Spring中Bean的三种实例化方式详解

    目录 一.环境准备 二.构造方法实例化 三.分析Spring的错误信息 四.静态工厂实例化 4.1 工厂方式创建bean 4.2 静态工厂实例化 五.实例工厂与FactoryBean 5.1 环境准备 5.2 实例工厂实例化 5.3 FactoryBean的使用 六.bean实例化小结 一.环境准备 准备开发环境 创建一个Maven项目 pom.xml添加依赖 resources下添加spring的配置文件applicationContext.xml 最终项目的结构如下: 二.构造方法实例化 在

  • vue3.0中的watch侦听器实例详解

    vue3.0中的watch侦听器实例详解

    目录 前言 侦听器和计算属性的区别 vue3如何使用watch呢? 基本使用 监听多个响应式数据 侦听reactive定义的响应式数据 监听reactive定义的响应式数据的某一个属性 配置选项用法 总结 前言 虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器.这就是为什么 Vue 通过watch选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的. 侦听器和计算属性的区别 计算属性里不可以做异步操作,侦听器可以做异步操作

  • 在Android TextView中显示图片的4种方式详解

    在Android TextView中显示图片的4种方式详解

    我们知道,TextView控件一般是用来显示文本的,而图片一般是用ImageView控件来显示. 那TextView能否显示图片呢?答案是肯定的!下面列出常见的4种方式. 1.XML文件中指定属性值 这种方式应该是最常用的了,在TextView的左上右下显示图片,可用  android:drawableLeft  android:drawableTop  android:drawableRight  android:drawableBottom 比如我们要在TextView的顶部设置图片,代码如

  • Django中提供的6种缓存方式详解

    前言 由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将一个某个views的返回值保存至内存或者memcache中,5分钟内再有人来访问时,则不再去执行view中的操作,而是直接从内存或者Redis中之前缓存的内容拿到,并返回. Django中提供了6种缓存方式: 开发调试 内存 文件 数据库 Memcache缓存(python-memcached模块) Memcache缓存(pylibmc模块) 1.配置

  • Java中Singleton的3种实现方式详解

    一.什么是Singleton? <设计模式>的作者.Eclipse和 Junit 的开发者 Erich Gamma 在它的理论体系中将 Singleton 定义为仅仅被实例化一次的类.在当今面向对象程序的实际开发中,Singleton 通常被用来代表一个无状态的对象,例如函数和那些本质上唯一的系统组件. 值得注意的是,使类成为 Singleton 会使得它的客户端测试变得非常困难,因为我们不可能给Singleton替换模拟实现,除非我们实现一个充当其类型的接口. 实现 Singleton 有三

  • Spring中xml配置文件的基础使用方式详解

    Spring中xml配置文件的基础使用方式详解

    目录 1. xml配置文件的读取 1.1 通过类路径读取配置文件 1.2 通过文件系统绝对路径读取配置文件 1.3使用BeanFactory接口读取配置文件 2.带参构造对象的创建(constructor-arg标签) 3.使用另一个类中的方法创建对象,并放到Spring容器中 4.调用另一个类中的静态方法创建对象,并放到Spring容器中 5.对象的生命周期 6.单例多例的测试 1. xml配置文件的读取 目录结构 applicationContext.xml配置文件 <?xml versio

  • Lua中table的几种构造方式详解

    之前对于Lua的研究都是纸上谈兵,没有真正的项目练手,现在公司的项目基本上都是用Lua开发,是时候补充一下我那蹩脚的Lua知识了. 基础数据类型.表达式.循环结构什么的我就不说了,这么简单的东西说了也要被大家喷. 今天我想说说table的几种构造方式. 0.Lua调试工具--LuaEditor 首先,如果你是第一次接触Lua,请补充一下Lua的最基本之中的基础语法(小若:O O!),然后下载一个LuaEditor工具,用来查看Lua执行效果,当然也可以调试,本篇内容不解释这个工具.可以百度一下这

  • CodeIgniter中使用cookie的三种方式详解

    cookie在php程序设计中应用十分广泛,本文所述CodeIgniter中使用cookie主要有以下三种方式,读者可以根据自身项目需求酌情采用. 第一种方式:采用php原生态的方法设置的cookie的值 setcookie("user_id",$user_info['user_id'],86500); setcookie("username",$user_info['username'],86500); setcookie("password"

  • Android开发中的几种网络请求方式详解

    Android应用经常会和服务器端交互,这就需要手机客户端发送网络请求,下面介绍四种常用网络请求方式,我这边是通过Android单元测试来完成这四种方法的,还不清楚Android的单元测试的同学们请看Android开发技巧总结中的Android单元测试的步骤一文. Java.NET包中的HttpURLConnection类 Get方式: // Get方式请求 public static void requestByGet() throws Exception { String path = "h

随机推荐