Vue 项目中使用 Element UI库(Element UI 是一套基于 Vue.js 的桌面端组件库)

news/2024/7/14 8:05:48/文章来源:https://blog.csdn.net/qq_53348178/article/details/139240896

1. 安装 Element UI

 npm install element-plus@next

2.引入 Element UI(在main.js中引入组件,注意要引入.css文件,图标也要单独引用)

 import { createApp } from 'vue'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'import elementIcon from "./plugins/icons";import { createPinia } from 'pinia'import axios from "axios"// import './style.css'import router from './router'import App from './App.vue'​const pinia = createPinia()const app = createApp(App);​app.use(ElementPlus);app.use(router);app.use(pinia);app.use(elementIcon);app.config.globalProperties.$axios = axios​app.mount('#app')

3.使用 Element UI 组件:在 Vue 组件中即可使用 Element UI 提供的各种组件

 <template><el-form :model="user" label-width="120px" id="login"><el-form-item label="用户名" for="username"><el-input v-model="user.username" id="username" placeholder="请输入用户名" /></el-form-item>​<el-form-item label="密码" for="password"><el-input v-model="user.password" id="password" placeholder="请输入密码" /></el-form-item><el-button @click="login" margin="0 auto">登录</el-button></el-form></template>

4.按需加载:Element UI 也支持按需加载,以减小项目的体积。可以使用 babel-plugin-component 或者 babel-plugin-import 等工具来实现按需加载(做优化,可以不用)

 // babel.config.jsmodule.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: [['import',{libraryName: 'element-plus',customStyleName: (name) => {return `element-plus/lib/theme-chalk/${name}.css`;}},'element-plus']]};​

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

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

相关文章

python中的空语句以及对于条件语句的总结

if条件&#xff1a; 代码块 if条件&#xff1a; 代码块1 else&#xff1a; 代码块2 if条件1&#xff1a; 代码块1 elif条件2&#xff1a; 代码块2 else&#xff1a; 代码块3

【class18】人工智能初步----语音识别(4)

【class17】 上节课&#xff0c;我们学习了: 语音端点检测的相关概念&#xff0c;并通过代码切分和保存了音频。 本节课&#xff0c;我们将学习这些知识点&#xff1a;1. 序列到序列模型2. 循环神经网络3. 调用短语音识别接口 知其然&#xff0c;知其所以然 在调用语…

【最新更新】上市公司-全要素生产率(1999-2023年)(数据+5种方法测算)

上市公司的全要素生产率是指在一定时期内&#xff0c;上市公司通过使用各种生产要素(包括资本、劳动力、技术等)所创造的价值。它是衡量上市公司经营绩效的重要指标之一&#xff0c;可以反映出公司的生产效率和创新能力。全要素生产率的计算方法有很多种&#xff0c;其中最常见…

Springboot项目——博客平台

前言&#xff1a;为巩固之前学习的知识&#xff0c;同时锻炼自己的代码能力&#xff0c;项目经验&#xff0c;熟悉前后端交互方式等&#xff0c;特此完成一个博客平台系统。&#xff08;总之&#xff0c;为了学习&#xff0c;为了进步&#xff09; 博客平台&#xff1a;本项目…

鸿蒙开发接口UI界面:【@ohos.mediaquery (媒体查询)】

媒体查询 说明&#xff1a; 从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 &#xff1a; gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。 导入模块 import mediaquery from ohos.media…

Python图像处理库全面详细解析

目录 引言 PIL和Pillow&#xff1a;基础但强大的图像处理 PIL到Pillow的演变 功能亮点 实际应用案例 Pillow的适用场景 结论 ​编辑 OpenCV&#xff1a;计算机视觉的瑞士军刀 OpenCV的核心特点 功能亮点 实际应用案例 OpenCV的适用场景 结论 ​编辑 Scikit-Imag…

AI预测福彩3D采取888=3策略+和值012路一缩定乾坤测试5月28日预测第4弹

昨天的第二套方案已命中&#xff0c;第一套方案由于杀了对子&#xff0c;导致最终出错。 今天继续基于8883的大底&#xff0c;使用尽可能少的条件进行缩号&#xff0c;同时&#xff0c;同样准备两套方案&#xff0c;一套是我自己的条件进行缩号&#xff0c;另外一套是8883的大底…

WordPress国外超人气主题Vikinger汉化版

WordPress国外超人气主题Vikinger汉化版 前言效果图安装教程领取主题下期更新预报 前言 我们在上一个教程已经学过如何安装WordPress&#xff0c;所以现在不用多说。 效果图 安装教程 下载后先本地解压&#xff0c;找到vikinger.zip文件&#xff0c;上传安装并启用主题。 访…

LeetCode题练习与总结:有序链表转换二叉搜索树--109

一、题目描述 给定一个单链表的头节点 head &#xff0c;其中的元素 按升序排序 &#xff0c;将其转换为平衡二叉搜索树。 示例 1: 输入: head [-10,-3,0,5,9] 输出: [0,-3,9,-10,null,5] 解释: 一个可能的答案是[0&#xff0c;-3,9&#xff0c;-10,null,5]&#xff0c;它表…

区块链钱包如果丢失了私钥或助记词,资产还能恢复吗?

如果你丢失了区块链钱包的私钥或助记词&#xff08;通常是用于恢复钱包的短语或种子&#xff09;&#xff0c;那么你的资产在大多数情况下是无法恢复的。私钥是访问和控制你在区块链上资产的唯一凭证&#xff0c;而助记词&#xff08;如BIP39标准中的12、18、24个单词的短语&am…

MySQL中Undo-log是什么?有什么作用?

2.6.1. Undo-log撤销日志 Undo即撤销的意思&#xff0c;通常也称为回滚日志&#xff0c;用来给MySQL撤销SQL操作的。 当一条写入类型的SQL执行时&#xff0c;都会记录Undo-log日志&#xff0c;Undo-log并不存在单独的日志文件&#xff0c;InnoDB默认是将Undo-log存储在xx.ibd…

java项目——图书管理系统

文章目录 前言图书管理系统整体框架&#xff1a;book包user包Main包&#xff1a;iooperation包总结&#xff1a; 前言 针对这些天所学的javaSE的知识&#xff0c;用一个小项目来实践一下。 图书管理系统 整体框架&#xff1a; 采取面向对象的思想实现此项目&#xff0c;首先…

企业如何正确地利用LLM大模型?

大型语言模型 (LLM) 不值得信任。就是这样。 考虑到它们先进的 AI 能力以及当今强大的基础模型的普遍知识&#xff0c;这似乎是一件令人惊讶的事情。然而&#xff0c;问题的关键在于 LLM 无法解释其输出。你不能信任 LLM 的结果&#xff0c;不是因为它不准确&#xff0c;而是因…

超市进销存|基于SprinBoot+vue的超市进销存系统(源码+数据库+文档)

超市进销存系统 目录 基于SprinBootvue的超市进销存系统 一、前言 二、系统设计 三、系统功能设计 1 登录注册 2 管理员功能模块 3员工功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#x…

golang中的md5、sha256数据加密文件md5/sha256值计算步骤和运行内存图解

在go语言中对数据计算一个md5&#xff0c;或sha256和其他语言 如java, php中的使用方式稍有不同&#xff0c; 那就是要加密的数据必须通过流的形式写入到你创建的Hash对象中。 Hash数据加密步骤 1. 先使用对应的加密算法包中的New函数创建一个Hash对象&#xff0c;(这个也就是…

手搓单链表(无哨兵位)(C语言)

目录 SLT.h SLT.c SLTtest.c 测试示例 单链表优劣分析 SLT.h #pragma once#include <stdio.h> #include <assert.h> #include <stdlib.h>typedef int SLTDataType;typedef struct SListNode {SLTDataType data;struct SListNode* next; }SLTNode;//打印…

Hololens 2 新建自定义按钮

官方链接地址 1、创建Cube 2、添加PressableButton脚本&#xff0c;并点击AddNearin… 3、把Cube拖入到MovingButtonVisuals变量中 4、点击NearInteractionTouchable组件&#xff08;这个组件是添加和上一个脚本绑定的&#xff0c;自动添加上来的&#xff09;上的Fix… 5、…

linux系统常用压缩和解压命令

文章目录 Ubuntu 系统中的文件压缩与解压指南一、常用的压缩和解压工具二、tar 工具三、gzip 工具四、bzip2 工具五、zip 和 unzip 工具六、7z 工具乱码批量解压脚本七、总结 Ubuntu 系统中的文件压缩与解压指南 在 Ubuntu 系统中&#xff0c;文件压缩与解压是日常操作中非常常…

《Effective Objective-C 2.0》读书笔记——对象、消息、运行期

目录 第二章&#xff1a;对象、消息、运行期第6条&#xff1a;理解“属性”这一概念第7条&#xff1a;在对象内部尽量直接访问实例变量第8条&#xff1a;理解“对象等同性”这一概念第9条&#xff1a;以“类族模式”隐藏实现细节第10条&#xff1a;在既有类中使用关联对象存放自…

RSC英国皇家化学学会文献查找下载

英国皇家化学学会(Royal Society of Chemistry&#xff0c;简称RSC)是以促进全球化学领域研究发展与传播为宗旨的国际权威学术机构&#xff0c;是化学信息的一个重要宣传机关和出版商。RSC出版的期刊是化学领域的核心期刊&#xff0c;大部分被SCI和MEDLINE收录&#xff0c;如An…