【Vue】Vue集成Element-UI框架

在这里插入图片描述

🙋‍ 一日之际在于晨
⭐本期内容:Vue集成Element-UI框架
🏆系列专栏:从0开始的Vue之旅


文章目录

  • Element-UI简介
  • 安装Element-UI
    • npm安装
    • CDN安装
  • 引入Element-UI
  • 测试是否引入成功
  • 总结


Element-UI简介

Element-UI官网:点击进入
Element-UI 是一套基于 Vue 2.0 的桌面端组件库,由饿了么前端团队推出并进行开源。它提供了丰富的 PC 端组件,简化了常用组件的封装,大大降低了开发难度,使开发人员能够轻松构建功能强大、风格统一的页面。Element-UI 与 Vue.js 集成非常紧密,开发者可以轻松地将 Element-UI 的组件嵌入到他们的 Vue.js 应用程序中。

安装Element-UI

npm安装

执行命令npm i element-ui -S则可通过npm进行安装,它能更好地和 webpack 打包工具配合使用。

  • npm: Node.js 的包管理器,用于安装和管理 Node.js 项目中的依赖包。
  • i: install 的缩写,表示要安装一个或多个包。
  • element-ui:你要安装的包的名称。element-ui 是一个基于 Vue.js 的桌面端 UI 组件库,提供了一系列可重用的组件,用于快速构建用户界面。
  • -S:这是 --save 的缩写,意味着将 element-ui 这个包添加到项目的 package.json 文件的 dependencies 列表中。当你把项目分享给别人或部署到生产环境时,package.json 文件会告诉 npm 需要安装哪些依赖。
    在这里插入图片描述

CDN安装

使用CDN(Content Delivery Network,内容分发网络)安装Element UI相对简单,不需要通过npm或yarn等工具进行复杂的配置。CDN安装允许你直接通过引用网络上的Element UI资源来使用它。以下是如何使用CDN安装Element UI的步骤:

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<head>  <!-- 引入Element UICSS文件 -->  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">  
</head><body>  <!-- 引入Element UI的JavaScript文件 -->  <script src="https://unpkg.com/element-ui/lib/index.js"></script>  
</body>

注意:CDN安装方式通常适用于快速原型设计或演示,但对于生产环境,建议使用npm或yarn等包管理工具进行安装,这样可以更好地管理依赖和版本。CDN服务可能会存在网络延迟或中断的风险,因此如果你对项目的稳定性和性能有较高要求,建议考虑其他安装方式。

引入Element-UI

初始化Vue实例后,在main.js中直接进行引用。

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App)
});

在这里插入图片描述
{ size: "small" }是一个配置对象,用于定制Element-UI组件的某些全局行为或样式。在这个例子中,我们配置了size属性为"small"。它通常用于改变组件的尺寸,使其更适应特定的设计或布局需求。例如,按钮、输入框等组件可能会有默认的尺寸,但通过设置size属性,你可以使它们更小或更大,以适应你的界面设计。

测试是否引入成功

我们在页面中引入一个按钮,看是否可以在页面中显示。
在这里插入图片描述
接着在控制台启动项目,执行命令npm run serve
在这里插入图片描述
此时会发现页面中显示了刚刚引入的按钮,说明Element-UI引入成功啦~
在这里插入图片描述


总结

今日之学习篇章已然落笔,愿诸君有所收获。🤩
倘若您对此深感兴趣,不妨关注此专栏,新知将持续涌现,与您共舞思维的华章。😎
期待下次再会,愿我们于知识的海洋中,再度相聚,共赏智慧之花绽放。👍
在这里插入图片描述

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

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

相关文章

极大提高工作效率的 Linux 命令

作为一名软件开发人员&#xff0c;掌握 Linux 命令是必不可少的技能。即使你使用 Windows 或 macOS&#xff0c;你总会遇到需要使用 Linux 命令的场合。例如&#xff0c;大多数 Docker 镜像都基于 Linux 系统。要进行 DevOps 工作&#xff0c;你需要熟悉Linux&#xff0c;至少要…

C语言例3-32:使用位移位运算符的例子

设 unsigned short a 0101 ;short b -6 ; a 为无符号八进制整数&#xff0c;对应的二进制数为0000 0000 0100 0001b 为有符号十进制整数&#xff0c;对应的二进制数为1111 1111 1111 1010 &#xff01;&#xff01;&#xff01; 计算机系统中整型数一律采用补码表示&#…

vue-quill-editor和vue-ueditor-wrap富文本编辑器应用

目录 一、vue-quill-editor 1.1、界面展示 1.2、代码介绍 1.2.1、安装 1.2.2、配置 1.2.3、代码应用 1.2.4、提取内容 二、vue-ueditor-wrap 2.1、界面展示 2.2、代码介绍 2.2.1、安装 2.2.2、配置 2.2.3、代码应用 一、vue-quill-editor 1.1、界面展示 文本输出…

Vue响应式原理全解析

前言 大家好&#xff0c;我是程序员蒿里行。浅浅记录一下面试中的高频问题&#xff0c;请你谈一下Vue响应式原理。 必备前置知识&#xff0c;​​Vue2​​官方文档中​​深入响应式原理​​​及​​Vue3​​官方文档中​​深入响应式系统​​。 什么是响应式 响应式本质是当…

liunx CentOS7 搭建lnmp环境 php nginx mysql

安装一些刚需软件&#xff1a;不懂请自行查询 安装一些需要的软件命令 yum install wget vim net-tools bash* lrzsz tree nmapnc lsof telnet -y 刷新命令 source /usr/share/bash-completion/bash_completion echo source /usr/share/bash-completion/bash_completion &…

UE5 C++ 3D血条 响应人物受伤 案例

一.3Dwidget 1.创建C Userwidget的 MyHealthWidget&#xff0c;声明当前血量和最大血量 UCLASS() class PRACTICEC_API UMyHealthWidget : public UUserWidget {GENERATED_BODY() public:UPROPERTY(EditAnywhere,BlueprintReadWrite,Category "MyWidget")float C…

利用API打造卓越的用户体验

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;日常聊聊 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 正文 1. 数据驱动的设计 2. 功能扩展与整合 3. 实时性与响应性 4. 个性化推荐与定制化服务 结语 我的其他博客 正文 随着数字化时代的…

python 操作excel(openpyxl.load_workbook)、excel操作封装

操作excel 其他的库&#xff1a; xlrd xlwt &#xff1a; 过时了&#xff0c;只能操作xls后缀的文件。pandas&#xff1a;大数据测试 数据分析项目会用。 openpyxl&#xff1a;第三方库 支持的格式有&#xff1a;.xlsx、.xlsm、.xltx、.xltm&#xff0c;l不支持.xls文件格式…

npm i安装依赖报错,但是cnpm i 却安装成功

问题描述&#xff1a;在a项目中npm i 安装依赖时发生以上报错&#xff0c;但是cnpm i 却成功&#xff0c;而且在其他项目中npm i 安装其他项目依赖也能成功.... 解决办法&#xff1a;删除项目中package-lock.json文件后再npm i 即可

搭建Linux内核开发环境——保姆教程(持续更新中)

搭建Linux内核开发环境——保姆教程&#xff08;持续更新中&#xff09; git版本管理汇编器链接器调试器编辑器构建系统模拟器文档工具图形设计工具 在此文中&#xff0c;持续完善&#xff0c;搭建内核开发环境的细节&#xff0c;有需要的小伙伴儿可以持续关注下 git版本管理 …

Ruby选择结构实战

文章目录 一、Ruby选择结构实战概述二、Ruby选择结构实战案例&#xff08;一&#xff09;闰年判断1、编写程序&#xff0c;实现功能2、程序的解释说明3、运行程序&#xff0c;查看结果 &#xff08;二&#xff09;求解一元二次方程1、编写程序&#xff0c;实现功能2、程序的解释…

rust - 基于AES-CBC-128的双重加密实现

通常加密密钥不要出现在源码中&#xff0c;比如配置文件中的数据库密码等。解决方案通常采用将密钥存放在环境变量中&#xff0c;进程启动时从环境变量获取密钥加载到内存中。 还有一种方案&#xff0c;对密钥进行加密&#xff0c;源码中只包含对密钥加密的根密钥和对密钥加密…

android gdb 调试

gdbgdbserver远程调试技术&#xff08;一&#xff09;——调试环境搭建_gdbserver 远程调试-CSDN博客 GDB/gdbserver 7.4.1 for Android with NEON support (gnutoolchains.com) sudo apt-get install texinfo$ tar zxvf gdb-7.12.tar.gz $ cd gdb-7.12/$ mkdir build$ cd bu…

jax不识别gpu gpu: RuntimeError: Unknown backend: ‘gpu‘ requested

这里写自定义目录标题 jax 不识别gpu错误信息最终解决方案 倒腾过程jaxlib version jax 不识别gpu 以下内容在 x86 linux cudagpu 测试通过 错误信息 jax-0.4.25 jaxlib-0.4.25 不识别gpu: RuntimeError: Unknown backend: ‘gpu’ requested, but no platforms that are in…

Linux--Flappy_bird实现

目录 void handler(int sig): mian: void init_curses() int set_timer(int ms_t); 小鸟的操作&#xff1a; void show_pipe()&#xff1a; void create_list() void clear_pipe() void move_pipe(); test_bird.c完整代码&#xff1a; 代码实现&#xff1a; #includ…

STM32 CubeMX使用介绍(含FreeRTOS生成)

文章目录 前言1. 简介1.1 什么是STM32CubeMX1.2 为什么会有STM32CubeMX的出现1.3 STM32CubeMX常用功能有哪些&#xff1f;1.4 官方资料下载地址 2. 下载和安装STM32CubeMX2.1 下载软件2.2 软件安装 3. 使用方式3.1 说明3.2 不同选择器介绍3.3 构建新的项目3.1 选择单片机的型号…

前端工程化(三)邂逅Webpack和打包过程

目录 Vue项目加载Webpack 安装Webpack的默认打包创建局部的 webpack Vue项目加载 JavaScript的打包&#xff1a;  将ES6转换成ES5的语法&#xff1b;  TypeScript的处理&#xff0c;将其转换成JavaScript&#xff1b; Css的处理&#xff1a;  CSS文件模块的加载、提取&a…

android 14 创建文件java.io.IOException: Operation not permitted

android 14 创建文件java.io.IOException: Operation not permitted Operation not permitted问题原因Android文件系统有哪些 Operation not permitted 问题原因 一般是创建文件时&#xff0c;文件夹或文件名称包含特殊字符&#xff0c;创建文件或文件夹时需要检查文件名称是…

题目:出列(蓝桥OJ 3223)

问题描述&#xff1a; 解题思路&#xff1a; 先使用暴力找到规律再解。 暴力做法&#xff1a;将数据放到一个动态数组中&#xff0c;下标就表示当前编号&#xff0c;符合题意的就放到覆盖该数组中&#xff0c;依次循环&#xff0c;直到只有一个元素停。 规律&#xff1a;小于该…

爬虫(七)

1.批量爬取知网数据 lxml:是 Python 的一个功能强大且易用的 XML 和 HTML 处理库。它提供了简单又轻巧的 API,使得解析、构建和操作 XML 和 HTML 文档变得非常方便。lxml 库通常用于处理 XML 和 HTML 文档,例如解析网页、处理配置文件等。openpyxl:是 Python 中用于操作 Ex…