Element快速学习

news2024/9/21 2:40:57
  • 博客主页:音符犹如代码
  • 系列专栏:JavaWeb
  • 关注博主,后期持续更新系列文章
  • 如果有错误感谢请大家批评指出,及时修改
  • 感谢大家点赞👍收藏⭐评论✍

什么是Element?

Element:它是由饿了么团队开发的一个技术框架,它基于Vue.js的桌面端组件库,提供了一些丰富的组件库,可以帮助开发者快速的搭建出精美的前端页面

官网:Element - The world's most popular Vue UI framework

Element组件库:

我们使用组件库首先要安装组件库,这里官网推荐我们使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

下载好后可以在我们的文件目录中看到element-ui这个文件夹

接下来我们要在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)
});

我们可以新建一个文件夹,在新的文件夹中创建一个以.vue为结尾的文件,写入我们要用的组件库的代码,在新文件中我们写好大体框架

如此,我们就可以去官网找我们需要的组件库,把代码粘贴到新建的vue文件中的<templat>中,然后后我们要在App.vue中<templat>中打出你新建的vue文件名称后vscdoe就会自动导入,如此就是完成了一个组件库的一个基本的使用了

其实Element的组件库非常简单,官网都把代码写好了,不需要大家打太多的代码,找到我们自己需要的组件库主打一个ctrl c+ctrl v(也算是程序员的一种快乐哈哈哈哈),然后记得在App.vue的文件中引用。

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

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

相关文章

cpp程序设计实践,类实现树链刨分以及计算几何类

程序设计要求 是某个cq高校期末程序设计实践作业&#xff0c;全部自己做的比较小众分值90。  试建立一个继承结构&#xff0c;以栈、队列为派生类&#xff0c;建立它们的抽象基类-Bag类&#xff0c;写出各个类的声明及定义&#xff0c;并实现如下功能&#xff1a;  统一命名…

华为高品质万兆园区体验保障技术白皮书

华为高品质万兆园区体验保障技术白皮书 - 华为企业业务 re 音视频会议已经成为企业办公的核心应用系统&#xff0c;尤其是高层会议的质量对企业的运营效率有很大影响&#xff0c;相 关的体验问题也是员工投诉的重灾区。但不同于传统的网络通断类问题,体验类问题涉及的范围大、…

高通QCC3081蓝牙芯片双CVC参数配置与优化指南

高通的QCC3081芯片搭载了领先的高通1-MIC、2-MIC、3-MIC CVC回声消除和噪声抑制技术&#xff0c;无论您身处何地&#xff0c;都能通过蓝牙立体声耳机或耳塞享受清晰的语音通话体验。无论是家中的生活噪音、街道的车流声还是人群的喧哗&#xff0c;这些背景噪声都不再是通话质量…

MATLAB基础:函数与函数控制语句

今天我们继续学习Matlab中函数相关知识。 API的查询和调用 help 命令是最基本的查询方法&#xff0c;可查询所有目录、指定目录、命令、函数。 我们直接点击帮助菜单即可查询所需的API函数。 lookfor 关键字用于搜索相关的命令和函数。 如&#xff0c;我们输入lookfor inpu…

vue-plugin-hiprint 打印 预览打印+静默打印

1.安装 npm install vue-plugin-hiprint npm i socket.io-client --save //为了静默打印 &#xff08;为此还需安装客户端&#xff09; 2…html页面 引入css <link rel"stylesheet" type"text/css" media"print" href"https://cdn.jsde…

MySQL高性能读写分离实战

介绍 我的上一篇文章实现了mysql的主从复制结构&#xff0c;今天这篇继续将如何实现读写分离。 读写分离是指&#xff1a;针对数据库的写操作&#xff08;插入、更新、删除等&#xff09;访问主数据库&#xff0c;读操作访问从数据库。 因为一般网站的读请求的数量是远远大于…

photoshop学习笔记——选区3 选区的变化

选区制作完成之后可以对选区进行变化 主要有&#xff1a; 反选&#xff1a;shift ctrl I 变换 修改&#xff1a; 边界 设置选区的边界大小 类似 CSS中的borderSize平滑 对选区的角进行平滑扩展 向外扩展选区收缩 向内收缩选区羽化 让边界变得过渡透明度 设置…

大数据学习之sparkstreaming

SparkStreaming idea中初步实现 Spark core: SparkContext 核心数据结构&#xff1a;RDD Spark sql: SparkSession 核心数据结构&#xff1a;DataFrame Spark streaming: StreamingContext 核心数据结构&#xff1a;DStream(底层封装了RDD)&#xff0c;遍历出其中的RDD即可进行…

docker 安装单机版redis

把这三个放上去 修改成自己的 按照自己需求来 照图片做 vim redis.conf vim startRedis.sh mv startRedis.sh deployRedis.sh sh deployRedis.sh docker run --privilegedtrue \ --name dev.redis --restartalways \ --network dev-net \ -v ./config/redis.conf:/etc/r…

Laravel:揭秘PHP世界中最优雅的艺术品

1. 引言 在PHP的世界里&#xff0c;框架如繁星般璀璨&#xff0c;但Laravel以其独特的魅力和优雅&#xff0c;成为了众多开发者心中的艺术品。本文将深入探讨Laravel为何能在众多PHP框架中脱颖而出&#xff0c;成为最优雅的选择。 1.1 Laravel的诞生背景 Laravel的诞生可以…

Windows Server搭建局域网NTP时间服务器与客户端通实现

1.服务器环境&#xff1a; win11更改注册表 winR输入regedit win11更改注册表 winR输入regedit 2.HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\Config&#xff0c;找到Config目录&#xff0c;双击Config目录下的AnnounceFlags&#xff0c;设为5。 3.HKEY_L…

学习大数据DAY25 Shell脚本的书写2与Shell工具的使用

目录 自定义函数 递归-自己调用自己 上机练习 12 Shell 工具 sort sed awk 上机练习 13 自定义函数 name(){ action; } function name { Action; } name 因为 shell 脚本是从上到下逐行运行&#xff0c;不会像其它语言一样先编译&#xff0c;所以函数必 须在调…

C++多态的底层原理

目录 1.虚函数表 &#xff08;1&#xff09;虚函数表指针 &#xff08;2&#xff09;虚函数表 2.虚函数表的继承--重写&#xff08;覆盖&#xff09;的原理 3.观察虚表的方法 &#xff08;1&#xff09;内存观察 &#xff08;2&#xff09;打印虚表 虚表的地址 函数 传参…

【无标题】Git(仓库,分支,分支冲突)

Git 一种分布式版本控制系统&#xff0c;用于跟踪和管理代码的变更 一&#xff0e;Git的主要功能&#xff1a; 二&#xff0e;准备git机器 修改静态ip&#xff0c;主机名 三&#xff0e;git仓库的建立&#xff1a; 1.安装git [rootgit ~]# yum -y install git 2.创建一个…

postman请求响应加解密

部分接口&#xff0c;需要请求加密后&#xff0c;在发动到后端。同时后端返回的响应内容&#xff0c;也是经过了加密。此时&#xff0c;我们先和开发获取到对应的【密钥】&#xff0c;然后在postman的预执行、后执行加入js脚本对明文请求进行加密&#xff0c;然后在发送请求&am…

Android adb shell ps进程查找以及kill

Android adb shell ps进程查找以及kill 列出当前Android手机上运行的所有进程信息如PID等&#xff1a; adb shell ps 但是这样会列出一大堆进程信息&#xff0c;不便于定向查阅&#xff0c;可以使用关键词查找&#xff1a; adb shell "ps | grep 关键词" 关键词查…

AI视频生成(即梦)

1.打开即梦网页版 https://jimeng.jianying.com/ai-tool/home 2.图片生成-导入参考图&#xff08;这里原本的红色或者灰度图都是可以的&#xff09;-精细度5&#xff08;最高图质量越高&#xff09; 注&#xff1a;根据需要&#xff0c;选择不同的生图模型&#xff0c;具有…

【后端开发实习】Python基于Quart框架实现SSE数据传输

Python基于Quart框架实现SSE数据传输 前言SSE简介理论分析代码实现 前言 在类似Chatgpt的应用中要实现数据的流式传输&#xff0c;模仿实现打字机效果&#xff0c;SSE是不二之选。传统的Flask框架不能满足异步处理的要求&#xff0c;没有异步处理就很难实现实时交互的需求&…

聊一次线程池使用不当导致的生产故障-图文解析

聊一次线程池使用不当导致的生产故障–图文解析 原文作者&#xff1a;货拉拉技术团队 原文链接&#xff1a;https://juejin.cn/post/7382121812434747418 1 抢救 交代了背景&#xff1a;交付的软件运行中出现了故障&#xff0c;报警机制被触发&#xff0c;通过飞书与报警电…

《500 Lines or Less》(5)异步爬虫

https://aosabook.org/en/500L/a-web-crawler-with-asyncio-coroutines.html ——A. Jesse Jiryu Davis and Guido van Rossum 介绍 网络程序消耗的不是计算资源&#xff0c;而是打开许多缓慢的连接&#xff0c;解决此问题的现代方法是异步IO。 本章介绍一个简单的网络爬虫&a…