AT UI

一、网站概况

AT UI 是一款由京东凹凸实验室（JDC.ol）于2017年开源的轻量级、模块化前端 UI 组件库。它主要面向中后台产品开发场景，帮助前端工程师、产品设计师和后台开发人员快速搭建统一风格的管理后台界面。目前该库托管在 GitHub 上，提供完整的组件文档、设计指南和 Sketch 资源下载。虽然没有公开的用户规模数据，但其在 GitHub 上的 Star 量超过 4k，在中文 Vue 组件库中拥有一定影响力。网站核心服务是提供一套基于 Vue 的 UI 组件集合，让开发者不用从零书写样式即可实现常见的按钮、表格、表单、弹窗等交互元素。

二、核心功能详解

1. 组件化开发
AT UI 将常见的 UI 元素（如按钮、输入框、下拉菜单、模态框、日期选择器等）封装成独立的 Vue 组件。开发者可以按需引入单个组件，也可以通过全局注册一次性加载全部组件。使用方式简单：直接复制组件标签并传入对应的属性即可获得可交互的界面。例如 <at-button type="primary">提交</at-button> 就能渲染一个蓝色主按钮，无需手动写 CSS。

2. 设计指南与规范
官网专门设置了“指南”板块，详细阐述了间距、色彩、字体、布局等设计原则。这些规范可以帮助团队统一设计语言，避免多个设计师产出风格混乱的界面。规范附带实际示例和说明，即使是非设计背景的开发人员也能快速理解“什么是对齐”，从而在实际项目中保持一致。

3. 配套 Sketch 设计资源
AT UI 提供了一整套视觉稿源文件（.sketch 格式），产品设计师可以直接在 Sketch 中拖拽组件、页面模板来制作高保真原型。这样开发过程中引入的组件与实际设计稿完全对应，极大减少了样式还原的沟通成本。资源包内包含组件库、页面模板、图标集合等，更新频率随代码版本同步。

三、使用教程/操作指南

步骤1：安装与引入（面向开发者）
打开终端，运行 npm install at-ui（或 yarn add at-ui）。在项目入口文件（如 main.js）中注册：import AtUI from 'at-ui'; import 'at-ui/style.css'; Vue.use(AtUI);。如果只想用个别组件，可采用按需加载：import { AtButton } from ‘at-ui’。

步骤2：在页面中使用组件
在 .vue 文件中直接使用组件标签。例如创建一个登录表单：使用 <at-input> 输入账号密码，<at-checkbox> 记住密码，<at-button> 提交。组件属性可参考官方文档中的 API 表。

步骤3：下载设计资源
进入官网“资源”板块，点击“视觉稿原稿下载”获得 .sketch 文件。使用 Sketch 打开后，可将现有组件拖入自己的设计稿，或直接修改模板中的页面布局。

注意事项
– AT UI 依赖 Vue 2.x（目前未提供 Vue 3 版本），请确保项目 Vue 版本匹配。
– 如果需要自定义主题颜色，可通过覆盖 SCSS 变量实现，文档中有详细示例。

四、内容与资源质量

AT UI 当前包含约 30+ 常用组件，覆盖按钮、导航、表单、数据展示、反馈等类别。每个组件都配有 Demo 示例、属性说明、事件回调接口以及代码片段。设计资源包内含有完整的组件库 Sketch 文件，以及两个完整的管理后台页面模板（如“仪表盘”和“表格管理”）。所有资源均由凹凸实验室官方维护，基于 MIT 开源协议，完全免费且无版权纠纷。不过该库自 2019 年之后更新频率有所降低，部分组件（如日期选择器、级联选择器）的功能不如知名竞品（如 Element UI）丰富。

五、适用人群与场景

适合人群
– 使用 Vue 2.x 构建中后台系统的前端工程师
– 需要与前端协同设计的产品/UI 设计师（依赖 Sketch）
– 希望快速搭建内部管理系统原型的小团队

不适合人群
– 非技术用户（完全不懂代码无法直接使用组件）
– 需要使用 Vue 3 或 React 的项目团队
– 追求社区活跃度、频繁更新的大规模项目组

典型使用场景
1. 新项目快速启动：团队在两周内搭建一个数据监控后台，使用 AT UI 的表格、图表（需额外集成）和导航组件，无需单独开发样式。
2. 设计交付一体化：设计师用 Sketch 组件库画好原型，开发直接使用同名的 AT UI 组件还原，确保像素级一致。
3. 学习中后台设计规范：新手开发可以阅读 AT UI 的设计指南，了解间距、色彩原则，锻炼组件化思维。

六、优缺点分析

与同类竞品对比
与 Element UI（Element Plus 为 Vue 3 版本）相比，AT UI 的组件库更轻，但社区贡献者、GitHub Star（Element UI 约 55k）、文档丰富度和模板数量都明显不及。对于中小型项目或需要严格按设计稿落地的场景，AT UI 的 Sketch 资源是独特优势；但对于大型复杂项目，Element UI 的生态更省心。