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 的方式引用

1
2
3
npm install at-ui

npm install at-ui-style

浏览器标签引入

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

1
2
3
4
5
6
<!-- 引入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

vue javascript at at-ui library
Web开发
感谢您的阅读，本文由 凹凸实验室 版权所有。如若转载，请注明出处：凹凸实验室（ https://aotu.io/notes/2017/08/28/at-ui/）
上次更新：2019-04-20 19:28:31