专业汉语词典知识平台,分享汉字词语知识、历史文学知识解答!

励北网
励北网

element是什么,前端框架element Plus教程

来源:小易整编  作者:小易  发布时间:2023-03-22 05:28
摘要:element是什么,前端框架elementPlus教程说到好用的前端框架,就不得不提ElementPlus,今天给大家介绍一下ElementPlus的基本知识和用法。1、ElementPlus概念Element+是一款用于制作页面样式,设...
element是什么,前端框架element Plus教程
说到好用的前端框架,就不得不提Element Plus,今天给大家介绍一下Element Plus的基本知识和用法。

1、Element Plus概念

Element+是一款用于制作页面样式,设计页面结构的框架。相比于其他的几个框架,这个框架设计的更为人性化,对企业级框架VUE的集成也很高。

1.1、设计原则

1.1.1、一致:
  • 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
  • 在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
1.1.2、反馈:
  • 控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
  • 页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。
1.1.3、效率:
  • 简化流程:设计简洁直观的操作流程;
  • 清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
  • 帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
1.1.4、可控:
  • 用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
  • 结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。
     

1.2、页面导航栏

1.2.1、页面导航栏概念
      导航可以解决用户在访问页面时:在哪里,去哪里,怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2 种类型。
      类似于下图所示:

element是什么,前端框架element Plus教程

       如果针对较为复杂的网页,Element+也提供了不同的类目的处理方式,如下图所示的二级类目:

element是什么,前端框架element Plus教程

或者是更为复杂的三级类目等:

element是什么,前端框架element Plus教程

      相信很多同学都见过这种类似的布局。那么这些布局在未来的前端学习中也是一个不可或缺的部分。
       这些的编写方法,我们稍后会讲到。

2、安装element+

2.1、环境支持

       从之前一路学过来的同学们对这个肯定不会陌生,我们在学习一个新框架的时候一定离不开对环境的配置。我也相信现在应该没有同学会用什么360、qq等浏览器去完成我们的代码编写了。
       那么让我们看看支持element+的浏览器。如果没有该版本,请自行去下载最新版。这边推荐使用google的Chrome来调试。

element是什么,前端框架element Plus教程

注意!!Element+不支持IE浏览器

2.2、使用vscode安装element+

# NPM$ npm install element-plus --save

2.2.1、使用网络环境引入element+(不推荐)

<head>  <!-- Import style -->  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />  <!-- Import Vue 3 -->  <script src="//unpkg.com/vue@3"></script>  <!-- Import component library -->  <script src="//unpkg.com/element-plus"></script></head>

2.3、使用网页引入的html版本的Element+案例(不推荐)


本文地址:百科问答频道 https://www.neebe.cn/wenda/936285.html,易企推百科一个免费的知识分享平台,本站部分文章来网络分享,本着互联网分享的精神,如有涉及到您的权益,请联系我们删除,谢谢!


百科问答
小编:小易整编
相关文章相关阅读
  • 七大后台前端UI框架推荐

    七大后台前端UI框架推荐

    今天分享几个前端开发UI框架,这些框架可以帮助那些在小公司没有前端设计人员情况下,快速搭建应用系统界面,在业余时间也可以接私活,很方便搭建后台应用系统界面操作方法01JqueryeasyUI是基于J...

  • 安卓手机怎么刷机教程

    安卓手机怎么刷机教程

    对于大部分安卓手机用户来讲,刷机是不可避免的。可是我们都知道刷机是有一定的风险的,有些用户还是不敢随意的刷机。我们先来了解一下安卓手机怎么刷机?操作方法01先关机,然后按住音量减键,再同时按开机键,即...

  • creo4.0完全自学教程

    creo4.0完全自学教程

    在机械零件设计的众多软件中,PRO/ECREO4.0可以说是很典型的一款设计软件,为设计工程师的工作省了很多的事情,让设计师在设计时更高效。下面一起来看看自觉的基础教程。操作方法01打开CREO4....

  • CEBX电子书制作图文教程

    CEBX电子书制作图文教程

    今天小编在这里介绍一下CEBX的特点和优点,以及怎样制作CEBX的电子书吧~ApabiReaderforiOS是一款新发布的,支持CEBX、PDF及TXT格式图书的电子书阅读器。这款软件有很多独特的功能是针对CEBX格式的图书所特有...

  • 酷我音乐直播在哪里? 酷我音乐观看直播的教程

    酷我音乐直播在哪里? 酷我音乐观看直播的教程

    酷我音乐想要看看直播,今天我们就来看看酷我手机端和电脑端看直播的教程。一、手机端酷我音乐观看直播的方法1、首先手机上要有酷我的软件,点击进入酷我音乐,之后手机页面如图所示2、酷我最上面有“直播”两字,然后点击&ldq...

  • ai海报怎么做(ai海报制作教程图文)

    ai海报怎么做(ai海报制作教程图文)

    阅前叨逼叨hello大家早上好我是大家的好朋友,我叫天天,昨晚翻阅超久才看到野鹿志这个教程,本次教程是用ai结合ps做的,说难不难(貌似很多会psai的人都这样说吧哈哈)说简单吧,其实细节调整也是需要花一点心思的。本次教程的图片多...

  • 绘制一台复古风电视机【PS教程】

    绘制一台复古风电视机【PS教程】

    小编:新手福利来啦!今天带来一个复古风格的旧电视图标临摹教程,图层样式是这次教程的重点。过程细致,步骤具体,新手最好掌握起来。把这个练完,绝对有不一样的收获!这里再次强调一点,图层样式中的参数设置是对应其相应图层的,受图层大小尺寸影响,在不...

  • bilibili直播姬怎么用 哔哩哔哩直播姬使用图文教程

    bilibili直播姬怎么用 哔哩哔哩直播姬使用图文教程

    哔哩哔哩直播姬怎么用?为了能方便广大新手主播快速上手b站的直播系统,哔哩哔哩最近推出了一款一键直播工具bilibili直播姬,这款软件可以让你不用再去设置麻烦的obs不用再去安装弹幕姬插件,软件集成了一切的功能,你想要开播只用点一下开始直播...

  • 周排行
  • 月排行
  • 年排行

精彩推荐