前端UI:element-ui,ant-design-vue_element-ui antdesign-程序员宅基地

技术标签: vue.js  

一、element-ui


1.简介
element-ui是一个ui库,它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。

其设计原则为:

一致性 Consistency

与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
反馈 Feedback

控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。
效率 Efficiency

简化流程:设计简洁直观的操作流程;
清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
可控 Controllability

用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。

2. Layout布局(el-row、el-col)
element-ui借用了bootstrap框架的思想,使用了栅格布局。它把单一的分栏分为24列。基本的使用方式如下

<el-row>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      </el-row>

span属性:表示col所要占领的栅格占比个数。
offset属性:表示col相对偏移的个数。

Container布局容器
这些布局容器,一般充当div来使用。

el-container:外层容器。当子元素中包含 el-header 或 el-footer 时,全部子元素会垂直上下排列,否则会水平左右排列。

el-header:顶栏容器

el-footer:底部栏容器

el-aside:侧边栏容器

el-main:页面主视图

3. icons的使用
在element-ui 中,图标是用class就可以搞定的。

按钮(el-button)
按钮是el-button来表示的

按钮是分类的,每一种类型就对应不同的button。

按钮的类型type可取值:’primary’、’success’、’warning’、’info’、’danger’

plain:决定了按钮是否使用素色系列。

round:决定了按钮是不是圆角展示。

<div class="flex-box">
      <h2>各种button</h2>
      <el-row class="flex1 margin-left10">
        <el-col :span="3"><el-button>默认按钮</el-button></el-col>
        <el-col :span="3"><el-button type="primary">主要按钮</el-button></el-col>
        <el-col :span="3"><el-button type="success">成功按钮</el-button></el-col>
        <el-col :span="3"><el-button type="warning">警告按钮</el-button></el-col>
        <el-col :span="3"><el-button plain>默认按钮</el-button></el-col>
        <el-col :span="3"><el-button round>默认按钮</el-button></el-col>
      </el-row>
    </div>

4.级联选择(el-cascader)

TimePicker 时间选择器
picker-options是一个对象。

这个对象的属性有start、step、end、selectableRange等。

当设置selectableRange属性时,它提供了一个时间选择的点。

5.日期选择器

日期选择器的type属性,决定选择的类型,这个type可以是date、week、month、year。

6.form表单

element-ui的form表单组件:el-form

element-ui的formItem组件:el-form-item

7.Table 表格
el-table:element-ui的表格。

el-table-column:element-ui的表格所对应的列。

table属性中:stripe属性可以创建带斑马纹的表格。

table属性中:border属性可以创建带斑马纹的表格。

table属性中:height属性可实现固定表头的表格。

8. Carousel 走马灯

其实就相当于一个轮播

type属性:可以让轮播卡片化

interval属性:定义轮播切换的周期

9. Collapse 折叠面板

折叠面板的el-collapse-item需要title属性。

10. Navigation 导航

el-menu
el-menu:表示导航菜单的盒子。
el-submenu:表示导航菜单的子盒子选项。
el-menu-item:表示导航菜单的每一项。

其中submenu和munuitem都是用于属性index。

11. Tree 树形控件

data属性:代表着树形组件的渲染。

二、ant-design-vue


1.简介
Ant Design Vue
Ant Design是蚂蚁金服出品的一款前端UI库,官方的介绍是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。简而言之就是一款简洁漂亮的UI库。

2. 目录结构
├── public
│ └── logo.png # LOGO
| └── index.html # Vue 入口模板
├── src
│ ├── api # Api ajax 等
│ ├── assets # 本地静态资源
│ ├── config # 项目基础配置,包含路由,全局设置
│ ├── components # 业务通用组件
│ ├── core # 项目引导, 全局配置初始化,依赖包引入等
│ ├── router # Vue-Router
│ ├── store # Vuex
│ ├── utils # 工具库
│ ├── locales # 国际化资源
│ ├── views # 业务页面入口和常用模板
│ ├── App.vue # Vue 模板入口
│ └── main.js # Vue 入口 JS
│ └── permission.js # 路由守卫(路由权限控制)
├── tests # 测试工具
├── README.md
└── package.json

4. 本地开发
(1) clone到本地后安装依赖
$ npm install
(2) 运行

$ npm run serve
启动浏览器访问 http:localhost:8000.看到首页登录页就OK
(3) 根据业务修改代码进行开发。

路由
(1) 在目录src下的config目录的router.config.js统一配置管理路由。

(2) vue路由是通过创建一个路由实例对象注册到vue实例中,菜单生成是根据路由配置的。在vue-router的配置上新增另一些参数。

1.hideChildrenInMenu用于隐藏不需要的菜单中展示的子路由个人设置。

2.hidden可以在菜单中不展示这个路由,包括子路由。效果可以查看other下的路由配置。

3.meta.title和meta.icon分别代表生成菜单项的文本和图标。

4.meta.permission 采取配置此路由的权限,如果配置了将会验证内部用户的权限,并决定是否展示*(放置在下)。

5.meta.hiddenHeaderContent可以强制当前页面不显示PageHeader组件中的页面带的面包屑和页面标题栏

(3) 实例

{undefined
path: ‘/form’, //路径
redirect: ‘/form/base-form’, //重定向到
component: PageView, //组件
meta: { title: ‘表单页’, icon: ‘form’, permission: [ ‘form’ ] }, //菜单名称,icon,路由权限验证
children: [
{undefined
path: ‘/form/base-form’,
name: ‘BaseForm’,
component: () => import(’@/views/form/BasicForm’), //路由懒加载模式
meta: { title: ‘基础表单’, keepAlive: true, permission: [ ‘form’ ] } //权限匹配
},
{undefined
path: ‘/form/step-form’,
name: ‘StepForm’,
component: () => import(’@/views/form/stepForm/StepForm’),
meta: { title: ‘分步表单’, keepAlive: true, permission: [ ‘form’ ] }
},
{undefined
path: ‘/form/advanced-form’,
name: ‘AdvanceForm’,
component: () => import(’@/views/form/advancedForm/AdvancedForm’),
meta: { title: ‘高级表单’, keepAlive: true, permission: [ ‘form’ ] }
}
]
},

4.布局
(1) 在Any Design 抽离了常用通用布局,放在layouts目录.

BasicLayout:基础页面布局,包含了头部导航,侧边栏和通知栏

UserLayout:抽离出用于登陆注册页面的通用布局

PageView:基础布局,包含了面包屑,和中间内容区 (slot)

RouterView:空布局,专门为了二级菜单内容区自定义

BlankLayout:空白的布局

(2) Ant Design 布局组件

Grid组件
它支持flex布局,基于行(row) 列(col),总结一下几个常用组件的属性
pull 栅格向左移动格数 number 0
push 栅格向右移动格数 number 0
span 栅格占位格数,为 0 时相当于 display: none number -
sm ≥576px 响应式栅格,可为栅格数或一个包含其他属性的对象 number|object -
md ≥768px 响应式栅格,可为栅格数或一个包含其他属性的对象 number|object -
lg ≥992px 响应式栅格,可为栅格数或一个包含其他属性的对象 number|object -
Layout 组件 ,他是页面整体布局,被抽象出来放到components 和 Layout文件夹。

5. 新增页面
(1) 新建页面在src/views下建一个vue文件,如果有相关页面,可以新建一个文件夹放置相关文件。

(2) 然后将组件在路由中定义好就可以访问页面。

(3) 最后在newPage中写业务代码

6. 样式
(1) 默认使用less,这样是为了防止样式全局污染。

(2) 在src/global.less设置全局样式

(3) 可以用 /deep/ 对组件进行样式穿透

11 serve side交互
(1) 请求流程
1.UI 组件交互操作;
2.调用统一管理的 api service 请求函数;
3.使用封装的 request.js 发送请求;
4.获取服务端返回;
5.更新 data。

(2) 为了方便管理维护,所有统一的请求都放在@src/api文件夹。
(3) 在@/src/utils/request.js中对axios 进行封装,目的是,便于统一出路post get 等请求参数,请求头。
例子:
// 根据用户 id 获取用户信息
export function getUser (id) {undefined
return axios({undefined
url: a p i . u s e r / {api.user}/api.user/{id},
method: ‘get’
})
}

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_45285598/article/details/123951265

智能推荐

Visual Prolog 的 Web 专家系统 (1)-程序员宅基地

文章浏览阅读4.6k次。用Prolog写程序,感觉舒坦。Prolog的编程范式,抽象程度远高于中、低级别的C语言等。写程序的源代码长度,至少比C语言的节省50%。而且,Prolog的语法简单,符号选择自然合理,养眼度远高于其“近亲”Erlang。Visual Prolog与其前身Turbo Prolog和PDC Prolog一脉相承,都是有严格类型限制的编译型软件。与其他各种解释型Prolog相比,Vis

BeanFactory[待补充]_请补充附件中的beanfactory代码-程序员宅基地

文章浏览阅读63次。package org.springframework.beans.factory;import org.springframework.beans.BeansException;import org.springframework.beans.factory.*;import org.springframework.core.ResolvableType;import org.springframework.lang.Nullable;/** * The root interface for_请补充附件中的beanfactory代码

勒让德函数(Legendre多项式)-程序员宅基地

文章浏览阅读2.1w次,点赞5次,收藏28次。文章目录勒让德函数定义勒让德多项式公式Associated Legendre Function勒让德函数定义勒让德函数指以下勒让德微分方程的解:(1−x2)d2P(x)dx2−2xdP(x)dx+n(n+1)P(x)=0(1-x^2)\frac{d^2P(x)}{dx^2} -2x\frac{dP(x)}{dx}+n(n+1)P(x)=0 (1−x2)dx2d2P(x)​−2xdxdP(x..._勒让德函数

信号完整性(SI)电源完整性(PI)学习笔记(十六)有损线、上升边退化与材料特性(三)_电路板设计中影响眼图质量的因素-程序员宅基地

文章浏览阅读7.9k次,点赞2次,收藏10次。有损线、上升边退化与材料特性(三)1.以dB度量的衰减将随着线长度的增加而线性增加。衰减是个表示有损传输线特殊性质的新术语,它是求解二阶有损RLGC电路模型的直接结果。通常用αn表示单位长度衰减。在低损耗近似中:如果随频率的变化,导线的单位长度串联电阻和由介质引起的单位长度并联电导都是常量,则传输线的衰减当频率变化时也是常量。所有频率感受到的损耗量都是相同的。2.由于趋肤效应的影响,单位长度串联电阻Rl随着频率的平方根增加;由于介质耗散因子的影响,单位长度并联电导Gl随着频率而线性增加。这意味着衰_电路板设计中影响眼图质量的因素

全景效果图html5,HTML5+JS实现可交互360°&柱状全景图浏览-程序员宅基地

文章浏览阅读410次。以前写文章总喜欢把自己折腾的过程和思路都写出来不知道为什么 懒,现在都喜欢直接上干货了,大概是为了节约大家的时间吧看标题是不是以为我要手动canvas秒天秒地?别瞎想了就我这样的菜逼只有调库的份直接上我好不容易找到的一个挺好用的库,Photo Sphere Viewer.js使用非常简单,官方示例:var viewer = PhotoSphereViewer({container: 'contai..._html5图片自动翻转,纯js实现360度旋转预览图片特效

离散数学 集合论_集合幂运算的相对补运算-程序员宅基地

文章浏览阅读9.2k次,点赞19次,收藏91次。1 集合代数1.1 集合的基本概念1.2 集合的运算1.3 有穷集的计数1.4 集合恒等式2 二元关系2.1 有序对与笛卡尔积2.2 二元关系 1 集合代数1.1 集合的基本概念1.2 集合的运算1.3 有穷集的计数1.4 集合恒等式2 二元关系2.1 有序对与笛卡尔积2.2 二元关系 ..._集合幂运算的相对补运算

随便推点

linux服务器安装大全_一个新的linux服务器都需要安装神恶魔-程序员宅基地

文章浏览阅读464次。安装centos 6.5操作系统选择minimal install来安装,具体安装步骤请google或百度。 下载软件工具包:1、下载nginxhttp://nginx.org/download/nginx-1.7.0.tar.gz2、下载pcre (支持nginx伪静态)http://jaist.dl.sourceforge.net/pro_一个新的linux服务器都需要安装神恶魔

Centos--Chrome&Chromedriver&PhantomJS 安装_centos only local connections are allowed.-程序员宅基地

文章浏览阅读198次。安装说明About me:IT新人,如有不足之处望各位即时评论探讨;文章内容如有侵权,请及时联系本人。Goals:1、安装chrome 2、安装chromedriver并配置环境 3、安装phantomJS安装环境:centos7测试安装环境:CentOS Linux release 7.3.1611 (Core)c..._centos only local connections are allowed.

微软多动画理解_keytrackenable-程序员宅基地

文章浏览阅读780次。不同的动作衔接的时候进行动画平滑过渡。通过m_bIdle和bCanMove控制动作的平滑过渡,SetMoveKey()是移动动画平滑过渡,SetIdleKey()是闲置动画平滑过渡void CTiny::SetMoveKey(){ DWORD dwNewTrack = ( m_dwCurrentTrack == 0 ? 1 : 0 ); LPD3DXANIMATIONC_keytrackenable

如何成为一名优秀的技术工程师?_当一名厉害的技术工-程序员宅基地

文章浏览阅读3.6k次。“工程师是科学家;工程师是艺术家;工程师也是思想家。”一位伟大的工程师曾经提出过这样的一段感言。不错,工程师是利用自然科学来创造工程的人。工程既是物质的也是思想上的。许多不朽的工程,伟大的发明以及出神入化的技术方案,许多人往往只看到了他们的瑰丽,而作为工程师则更应该看到设计的灵魂。因此我们应该深入的理解“工程师也是艺术家和思想家”。工程设计的本身就是一种艺术,也是工程师思想的结晶。一部精密的机械设_当一名厉害的技术工

php 页面图片无缝滚动,jQuery实现图片连接无缝滚动-程序员宅基地

文章浏览阅读107次。这次给大家带来jQuery实现图片连接无缝滚动,jQuery实现图片连接无缝滚动的注意事项有哪些,下面就是实战案例,一起来看一下。首先来看下html骨架,如下:111222333结构简单明了,没什么说的。讲下实现原理:p box是最外层盒子,给它指定的宽高,记得给box添加一个 overflow:hidden (超出的内容隐藏)样式,因为滚动肯定是会超出box的。我们通过js控制 ul 标签的ma..._jquery 实现无缝横向滚动拼接图特效

UnicodeDecodeError: 'ascii' codec can't decode byte 0xc1 in position 7: ordinal not in range(128)-程序员宅基地

文章浏览阅读1.4k次。正准备用python的openpyxl包把爬虫的数据存到excel表格中,在cmd上用pip安装openpyxl包时出现了如下错误:...UnicodeDecodeError: 'ascii' codec can't decode byte 0xc1 in position 7: ordinal not in range(128)查了许多资料,都不行。最后发现原因竟然又是自己windows上的用户_ascii' codec can't decode byte 0xc1 in position 7: ordinal not in range(128