百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术教程 > 正文

Element-ui简单使用

toqiye 2025-02-09 14:17 21 浏览 0 评论

什么是Element-ui?

根据官网的说法,Element-ui,是一套为开发者、设计师和产品经理准备的基于Vue 2.0的由饿了么公司出品的桌面端组件库

官网:https://element.eleme.cn/#/zh-CN

如何使用?

1、创建文件夹element-ui。

2、下载组件。

npm install vue #安装Vue
npm i element-ui -S #安装Element-ui

3、为了代码更加清爽,可以将主要依赖vue.min.js和element-ui包放入lib目录中,lib目录需手动创建。

4、搭建第一个UI界面入门程序。



?

 ?
 ?
 ?

?

 ?
? ? ? ?Button ? ? ? ? ?

Try Element

? ?
?
? ?

官网基本组件测试

1、容器,拿来即用即可。

2、图标,el内置了许多图标,使用icon="iconname"属性即可使用,也推荐使用
https://fontawesome.dashgame.com/这个网站中的图标。

Button

3、对于后台程序员来说,大部分情况下都是在对表单进行操作。el几乎内置了开发中会使用的所有表单组件。

前端怎么写?

对于一些后台开发人员来说,可能会存在开发一个项目不知道怎么开始第一步的问题,其原因大概是:

  • 没有清晰的界面定义。
  • 不会设计数据库。

对于第一个问题,Element-ui组件可以直接套用,我们平时可以多去看看其他网站如何设计,借鉴学习。

至于第二个问题,其实也是因为第一个问题没解决,当我们把前端写好之后,数据库的结构自然就出来了。解决了这两个问题,剩下的就是后台的CRUD了,这是我们最熟悉的部分。

编写前端的基本套路:

  • 见过足够多的组件,拼接组件,这样就形成了网页的基本形状。
  • 修改CSS即可。

设计多级下拉菜单的联动效果

如下图所示,现在要实现第一个下拉框选择不同的选项时,第二个下拉框中的下拉选项也要随之发生变化的效果,这时可以使用级联选择器(cascader)来实现。

?默认 click 触发子菜单 ?
?hover 触发子菜单 ?
?

相关推荐

Star 17.3k!给它一张屏幕截图,即可一键克隆网页!

本文为大家分享一款本周爆火的GPT开源项目。前言你敢信,只凭借着一张屏幕截图即可转换生成HTML/TailwindCSS代码。可以算得上是前端工程师的福音。它就是screenshot-to-...

AI从截图直接生成代码、前端程序员的福利!

简介项目可以将任何屏幕截图或设计转换为干净的代码(支持大多数框架)。来自领先公司的开发人员和设计师使用的排名第一的工具。完全开源,在GitHub上拥有超过35,000颗星。非常受欢迎。各位小伙...

一款高颜值、跨平台、自托管的免费开源CRM项目——Twenty

前言大家好,这里是可爱的Cherry。作为一个“甲方”,Cherry其实挺知道客户管理的重要的。但是对于客户管理怎么做,以及CRM的作用,我却是一无所知。之前有朋友在评论区留言,说有没有开源的CRM系...

解放双手,前端界面再也不用自己写了?

随着AI技术的发展,现在有越来越多的尝试将AI应用于UI设计和开发中,以期提高效率和降低成本。今天就给大家介绍一个开源的AI网页生成工具:OpenUIOpenUIOpenUI是一个创...

代码调试,教给你(代码调试是什么意思)

昨天我和一些朋友一起调试代码,他们做程序员这一行都不太久,我向他们展示了一些代码调试技巧。今天早上我在想,我应该如何教授他们学习代码调试?我在Twitter上发了一条推文说,我从来没有见过任何好的调试...

Screenshot-to-code:用屏幕截图生成代码

Screenshot-to-code是一个简单的工具,可使用AI将屏幕截图、模型和Figma设计转换为干净、实用的代码。现在支持ClaudeSonnet3.5和GPT-4o!Scre...

next实现原理(next method)

Next.js是一个基于React的服务器端渲染(SSR)和静态生成(SSG)框架,它的实现原理涉及多个关键技术点,包括服务端渲染(SSR)、静态生成(SSG)、客户端渲染(CSR)、...

可逐步操作的具体流程(可逐步操作的具体流程包括)

假设你是一个单人开发者,使用主流技术栈(React+Node.js+MySQL),以下是详细步骤:---###**一、需求分析与原型设计**1.**核心功能清单**-用户能添加、删除、...

截图转代码只需1步!你离高效开发只差这款神器

引言在现代前端开发中,将设计稿转换为代码是一个既重要又耗时的环节。手动编写HTML结构、调试CSS样式、调整布局对齐,不仅耗费时间,还容易出错。而Screenshot-to-Code这款革...

web开发 前端 后端(web开发前端后端)

区别:1、前端是指用户可见的界面,而后端是指用户看不到的东西,考虑底层业务逻辑的实现,平台的稳定性、性能等。2、前端开发用到的技术有HTML5、CSS3、JS、jQuery、Bootstrap、Nod...

手把手教你Dify私有化部署,打造专属AI平台

一、Dify是什么?Dify是一款极具创新性的开源LLM应用开发平台,它就像是一把万能钥匙,为开发者们打开了通往生成式AI应用开发新世界的大门。其融合了后端即服务(BackendasS...

前后端分离架构设计:提升开发效率与业务支撑力的密钥

前后端分离架构设计解析一、定义与核心思想前后端分离是一种将用户界面(前端)与业务逻辑(后端)解耦的架构模式,通过RESTfulAPI或GraphQL实现数据交互。前端专注于视图渲染与交互逻辑...

Kubernetes最小部署单元Pod(kubernetes最小部署单元)

一、Kubernetes与Pod简介在当今云计算和容器化技术盛行的时代,Kubernetes已然成为容器编排领域的中流砥柱。它是一个开源的容器编排平台,由Google基于其内部使用的Bo...

【程序员必藏!零基础本地部署DeepSeek大模型保姆级教程】

为什么选择本地部署?数据安全:敏感代码/业务数据永不外传闪电响应:局域网推理延迟<100ms,告别云端排队深度定制:自由修改模型代码,打造专属AI助手准备工具(5分钟搞定)1核心工具下载...

【Python程序开发系列】使用Flask实现前后端分离(案例)

这是我的第398篇原创文章。一、引言随着web开发的不断发展,前后端分离已成为越来越流行的架构设计。Flask是一个轻量级的Pythonweb框架,非常适合用于构建API,然后配合前端框...

取消回复欢迎 发表评论: