AT

AT-UI 是一款基于 Vue 2.x 的前端 UI 组件库,主要用于快速开发 PC 网站产品。

没错,这是又一款基于 Vue 的前端 UI 组件库,又双叒叕款 UI 库又双叒叕款轮子 但在人从众多类似的轮子中,AT-UI 属于视觉风格比较清新的一款。

同时 AT-UI 是凹凸实验室官方出品,带有凹凸品牌风格的一套 UI KIT,旨在解决网站项目开发前期的「UI 库选择恐惧症」。

官网:https://at.aotu.io/
项目地址:https://github.com/at-ui/at-ui

特性

  • 基于 Vue 开发组件

  • 基于 npm + webpack + babel 的工作流,支持 ES2015

  • CSS 样式独立,即使采用不同的框架实现都能保持统一的 UI 风格(详见:AT-UI-Style)

项目背景

目前市面上同类型的开源项目已经不少了,Antd, iView, Element 等精品项目也是圈粉大拿,成为许多 Web 开发者做管理端的首选 UI 库。为什么在竞争如此激烈的背景下,我们还要做同类型产品 AT-UI 呢?

首先作为一个成熟的前端团队,我们需要一套统一的 UI 库,以便于更好的对项目进行维护迭代。其次团队成员在日常开发中,会输出一些自定义的组件(例如甘特图等),如果能快速整合到 UI 库中,便可以快速进行测试迭代。最后,我们既有基于 Vue 的项目,也有基于 React 的项目,为了保证不同框架的项目能共用一套 UI,我们迫切需要一款样式能独立迭代的 UI 库。于是乎,秉承着造轮子,也要造好轮子的心态,开始了 AT-UI 的构建之旅。

愿景

我们希望 AT-UI 是一款视觉层面精美,代码层面高质量的 UI 库。同时也希望 AT-UI 能包含尽可能多的组件,能做到不请「外援」更加。为此,我们会尽可能完善各类型的组件,也非常欢迎组件 PR。

AT-UI 的部分组件借鉴了优秀项目 Antd, Element 和 iView 的实现思路及相关源码,并非闭门造车

安装

使用 npm 安装

推荐使用 npm 的方式进行开发,享受 node 生态圈和 webpack 工具链带来的便利。通过 npm安装的模块包,我们可以轻松的使用 import 或者 require 的方式引用

npm install at-uinpm install at-ui-style

浏览器标签引入

可以采用传统的 <script><link> 标签的方式引入资源,并且全局使用 AT-UI。
可以在 UNPKG 上找到最新版本的资源文件,然后在页面中直接引入。

<!-- 引入Vue --><script src="//vuejs.org/js/vue.min.js"></script><!-- 引入样式 --><link rel="stylesheet" href="//unpkg.com/at-ui-style/css/at.min.css"><!-- 引入组件库 --><script src="//unpkg.com/at-ui/dist/at.min.js"></script>

Demo 示例

更多使用说明,请阅读文档 AT-UI

写在最后

秉承万维网的开放精神,以及开源世界的信条,我们接受各种评价和讨论,最终目标是为开源世界贡献我们的一份力,感恩!
欢迎各位同学使用 AT-UI,如果你在使用过程中遇到问题,或者有好的建议,欢迎给我我们提 Issue 或者 Pull Request

本文分享自微信公众号 - 凹凸实验室(AOTULabs)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

MySQL部分从库上面因为大量的临时表tmp_table造成慢查询

背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_

皕杰报表之UUID

​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

2020年前端实用代码段,为你的工作保驾护航

有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )