vue element plus 快速开始

本节将介绍如何在项目中使用 Element Plus。

用法#

完整引入#

如果你对打包后的文件大小不是很在乎,那么使用完整导入会更方便。

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')
Volar 支持#

如果您使用 Volar,请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

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

按需导入#

您需要使用额外的插件来导入要使用的组件。

自动导入推荐#

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

Vite#
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})
Webpack#
// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')module.exports = {// ...plugins: [AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
}

想了解更多打包 (Rollup, Vue CLI) 和配置工具,请参考 unplugin-vue-components 和 unplugin-auto-import。

Nuxt#

对于 Nuxt 用户,只需要安装 @element-plus/nuxt 即可。

npm install -D @element-plus/nuxt

然后将下面的代码写入你的配置文件.

// nuxt.config.ts
export default defineNuxtConfig({modules: ['@element-plus/nuxt'],
})

配置文档参考 docs.

手动导入#

Element Plus 提供了基于 ES Module 的开箱即用的 Tree Shaking 功能。

但你需要安装 unplugin-element-plus 来导入样式。 配置文档参考 docs.

App.vue

<template><el-button>我是 ElButton</el-button>
</template>
<script>import { ElButton } from 'element-plus'export default {components: { ElButton },}
</script>
// vite.config.ts
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'export default defineConfig({// ...plugins: [ElementPlus()],
})

WARNING

如果使用 unplugin-element-plus 并且只使用组件 API,你需要手动导入样式。

Example:

import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'

快捷搭建项目模板#

我们提供了 Vite 模板。

对于Nuxt 用户,我们有一个 Nuxt 模板。

对于 Laravel 用户,我们也准备了Laravel 模板。

全局配置#

在引入 ElementPlus 时,可以传入一个包含 size 和 zIndex 属性的全局配置对象。 size 用于设置表单组件的默认尺寸,zIndex 用于设置弹出组件的层级,zIndex 的默认值为 2000

完整引入:

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 })

按需引入:

<template><el-config-provider :size="size" :z-index="zIndex"><app /></el-config-provider>
</template><script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'export default defineComponent({components: {ElConfigProvider,},setup() {return {zIndex: 3000,size: 'small',}},
})
</script>

使用 Nuxt.js#

我们也可以使用 Nuxt.js:

开始使用#

现在你可以启动项目了。 对于每个组件的用法,请查阅对应的独立文档。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/609815.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java线程池七个参数详解

前言 直接点题 核心线程数 - corePoolSize 最大线程数 - maximumPoolSize 空闲线程存活时间 - keepAliveTime 存活时间单位 - unit 任务队列 - workQueue 线程工厂 - threadFactory 拒绝策略- handler 概念 什么是池&#xff1f; 池&#xff08;Pool&#xff09;&…

haiku实现门控多头注意力模块

在多头注意力机制中&#xff0c;通常输入的数据包括查询&#xff08;Q&#xff09;、键&#xff08;K&#xff09;和值&#xff08;V&#xff09;。这些数据的维度以及权重矩阵的维度在多头注意力机制中扮演关键角色。下面对数据及权重的维度进行解释&#xff1a; 输入数据&…

鸿蒙原生应用/元服务开发-长时任务

概述 功能介绍 应用退至后台后&#xff0c;对于在后台需要长时间运行用户可感知的任务&#xff0c;例如播放音乐、导航等。为防止应用进程被挂起&#xff0c;导致对应功能异常&#xff0c;可以申请长时任务&#xff0c;使应用在后台长时间运行。申请长时任务后&#xff0c;系统…

Linux调试------gdb的使用

目录 前言 一、gdb打开可执行程序 二、查看代码与操作断点 1.l 查看代码 2.b 打断点 3.info b 查看断点信息 4.d 删除断点 5.disable 和 enable 断点的禁用与启用 三、调试 1.r 启动调试 2. n 逐过程 3. s 逐语句 4.display显示变量 5.undisplay 取消显…

e2studio开发磁力计LIS2MDL(1)----轮询获取磁力计数据

e2studio开发磁力计LIS2MDL.1--轮询获取磁力计数据 概述视频教学样品申请源码下载速率新建工程工程模板保存工程路径芯片配置工程模板选择时钟设置UART配置UART属性配置设置e2studio堆栈e2studio的重定向printf设置R_SCI_UART_Open()函数原型回调函数user_uart_callback ()prin…

C语言菱形图案生成程序详细解析

1. 介绍 在这篇博客中&#xff0c;我们将详细解析一个用C语言编写的程序&#xff0c;该程序旨在生成具有对称美感的菱形图案。用户可以通过输入指定的长度&#xff0c;程序将输出相应大小的菱形。 2. 代码 注&#xff1a;代码中的注释已经非常详细&#xff0c;也有举例&#…

根据MySql的表名,自动生成实体类,模仿ORM框架

ORM框架可以根据数据库的表自动生成实体类&#xff0c;以及相应CRUD操作 本文是一个自动生成实体类的工具&#xff0c;用于生成Mysql表对应的实体类。 新建Winform窗体应用程序AutoGenerateForm&#xff0c;框架(.net framework 4.5)&#xff0c; 添加对System.Configuration的…

高效构建Java应用:Maven入门和进阶(三)

高效构建Java应用&#xff1a;Maven入门和进阶&#xff08;三&#xff09; 三. Maven的核心功能和构建管理3.1 依赖管理和配置3.2 依赖传递和冲突3.3 依赖导入失败场景和解决方案3.4 扩展构建管理和插件配置 三. Maven的核心功能和构建管理 3.1 依赖管理和配置 Maven 依赖管理…

7-Docker私有仓库registry搭建

1.Docker私有仓库registry搭建 1.下载registry镜像 命令: docker pull registry [root@centos79 ~]# docker search registry NAME DESCRIPTION STARS OFFICIAL AUTOMATED registry …

CentOS安装Docker(超详细)

CentOS安装Docker 1 知识小课堂2 CentOS安装Docker2.1 1.1.卸载&#xff08;可选&#xff09;1.2.安装docker1.3.启动docker1.4.配置镜像加速 3 CentOS安装DockerCompose3.1.下载3.2.修改文件权限3.3.Base自动补全命令&#xff1a; 4 Docker镜像仓库4.1.简化版镜像仓库4.2.带有…

数据分析求职-知识脑图

今天和大家聊聊数据分析求职常见面试题&#xff0c;这是这个系列的第一篇文章&#xff0c;但是我不想开始就直接罗列题目&#xff0c;因为这样的文章实在太多了&#xff0c;同学们的兴趣程度肯定一般。所以&#xff0c;我想先和大家聊聊在准备面试题时候通常遇到的困扰&#xf…

GFP-CERTIFIED®FLUOFORTE®钙离子检测试剂盒

Enzo Life Sciences的GFP-CERTIFIED FLUOFORTE Calcium assay kit提供了一种荧光分析方法&#xff0c;用于检测广泛生物靶标的细胞内钙动员情况。相对于其他商业化的染料&#xff0c;GFP-CERTIFIED FLUOFORTE染料是最亮和最灵敏的荧光钙指示剂。该试剂盒为贴壁和非贴壁细胞系提…

生物信息学中的可重复性研究

科学就其本质而言&#xff0c;是累积渐进的。无论你是使用基于网络的还是基于命令行的工具&#xff0c;在进行研究时都应保证该研究可被其他研究人员重复。这有利于你的工作的累积与进展。在生物信息学领域&#xff0c;这意味着如下内容。 工作流应该有据可查。这可能包括在电脑…

linux 压力测试 AB ApacheBench

ab的简介 ab是apachebench命令的缩写。 ab是apache自带的压力测试工具。ab非常实用&#xff0c;它不仅可以对apache服务器进行网站访问压力测试&#xff0c;也可以对或其它类型的服务器进行压力测试。比如nginx、tomcat、IIS等 ab的原理 ab的原理&#xff1a;ab命令会创建多…

Pendulum详解3——Pendulum在数据分析中的应用 - 时光的数据探险

写在开头: 在数据分析的世界里,时光是一项无可避免的数据元素。处理时间数据,尤其是在大规模数据集和复杂时区的情境下,是数据科学家和分析师们经常面对的挑战。为了迎接这一挑战,我们介绍一款强大的时间处理库 - Pendulum,并深入探讨其在数据分析领域的优越性。 1. 时…

ros架构

ROS&#xff08;Robot Operating System&#xff09;是一个灵活的、分布式的系统架构&#xff0c;用于构建机器人软件。它由一系列工具、库和约定组成&#xff0c;提供了一套通用的功能和通信机制&#xff0c;以支持机器人系统的开发、部署和运行。 ROS架构主要包括以下几个核心…

C++面试宝典第17题:找规律填数

题目 仔细观察下面的数字序列,找到规律,并填写空白处的数字。 (1)1, 2, 4, 7, 11, 16, __ (2)-1, 2, 7, 28, __, 126 (3)6, 10, 18, 32, 57, __ (4)19, 6, 1, 2, 11, __ (5)2, 3, 5, 7, 11, __ (6)1, 8, 9, 4, __, 1/6 (7)1, 2, 3, 7, 16, __, 321 (8)1, 2, …

linux异常情况,排查处理中

登录客户环境后&#xff0c;发现一个奇怪情况如下图&#xff0c;之前也遇到过&#xff0c;直接fuser -ck /backup操作的话&#xff0c;主机将会重启&#xff0c;因数据库运行中&#xff0c;等待停机维护时间&#xff0c;同时也在想办法不重启的情况下解决该问题 [rootdb ~]# f…

linux发送http请求命令

一、http get请求 1、curl命令不带参 curl “http://www.baidu.com” 如果这里的URL指向的是一个文件或者一幅图都可以直接下载到本地 curl -i “http://www.baidu.com” 显示全部信息 curl -l “http://www.baidu.com” 只显示头部信息 curl -v “http://www.baidu.com”…

git撤销提交到本地的commit

有些时候&#xff0c;当我们提交代码到本地后&#xff0c;突然发现因为某些原因需要撤销提交本地的代码。 就比如我&#xff0c;因为代码写错了分支&#xff0c;已经提交到本地了&#xff0c;而我需要取消&#xff0c;并且还要把代码搞得另外的分支上。 提交前&#xff1a; …