Element-ui和vue-element-admin学习

Element-ui

什么是Element-ui?

根据官网的说法,Element-ui,是一套为开发者、设计师和产品经理准备的基于Vue 2.0的由饿了么公司出品的桌面端组件库。
官网:https://element.eleme.cn/#/zh-CN
Element-ui和vue-element-admin学习_第1张图片

如何使用?

1、创建文件夹element-ui。
2、下载组件。

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

3、为了代码更加清爽,可以将主要依赖vue.min.js和element-ui包放入lib目录中,lib目录需手动创建。
Element-ui和vue-element-admin学习_第2张图片
4、搭建第一个UI界面入门程序。





  
  
  



  
Button

Try Element

官网基本组件测试

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

Button

Element-ui和vue-element-admin学习_第3张图片
3、对于后台程序员来说,大部分情况下都是在对表单进行操作。el几乎内置了开发中会使用的所有表单组件。
Element-ui和vue-element-admin学习_第4张图片

前端怎么写?

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

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

对于第一个问题,Element-ui组件可以直接套用,我们平时可以多去看看其他网站如何设计,借鉴学习。至于第二个问题,其实也是因为第一个问题没解决,当我们把前端写好之后,数据库的结构自然就出来了。解决了这两个问题,剩下的就是后台的CRUD了,这是我们最熟悉的部分。
编写前端的基本套路:

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

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

如下图所示,现在要实现第一个下拉框选择不同的选项时,第二个下拉框中的下拉选项也要随之发生变化的效果,这时可以使用级联选择器(cascader)来实现。
Element-ui和vue-element-admin学习_第5张图片

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

你可能感兴趣的:(爱编程)