AT-UI 开源项目教程

2026-01-17 09:17:33作者：范垣楠Rhoda

"AT-UI 是一个基于 Vue.js 的高质量 UI 组件库，提供了一整套 UI 组件，包括 Button、Input、Select、Tag、Tooltip、Popover、Modal、Collapse、Slide、Carousel 等常用组件，以及 Timeline、Tree、Tabs、Breadcrumb、Pagination 等布局组件。AT-UI 的设计风格简约、扁平化，色彩搭配优雅，适合用于构建现代化的 web 应用程序。它的组件库非常丰富，并且每个组件都经过了精心设计和优化，性能表现良好。同时，AT-UI 的文档也非常详细，包括各种示例和 API 说明，方便开发者快速上手使用。"

项目地址：https://gitcode.com/gh_mirrors/at/at-ui

项目介绍

AT-UI 是一个专为桌面应用程序设计的新鲜且扁平的 UI 套件，基于 Vue.js 2.0 开发。它是一个模块化的前端 UI 框架，旨在快速开发强大的 Web 界面。AT-UI 提供了独立的 CSS 样式，确保一致的用户界面，并且具有友好的 API 和环境支持，包括现代浏览器和 Internet Explorer 9+。

项目快速启动

安装

推荐使用 npm 进行安装：

npm install at-ui

或者使用 <script> 标签进行全局使用：

<script type="text/javascript" src="at-min.js"></script>

使用

由于 AT-UI 的样式是独立的，因此在使用 AT-UI 之前需要安装 AT-UI-Style：

npm install at-ui-style

或者使用 <link> 标签引入样式：

<link rel="stylesheet" href="at-min.css" />

示例代码

以下是一个简单的示例代码，展示如何在项目中使用 AT-UI：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AT-UI 示例</title>
  <link rel="stylesheet" href="at-min.css">
</head>
<body>
  <div id="app">
    <at-button @click="showMessage">点击我</at-button>
  </div>
  <script src="at-min.js"></script>
  <script>
    new Vue({
      el: '#app',
      methods: {
        showMessage() {
          alert('Hello AT-UI!');
        }
      }
    });
  </script>
</body>
</html>

应用案例和最佳实践

AT-UI 已被广泛应用于各种桌面应用程序的开发中，特别是在需要快速开发且界面一致性要求较高的项目中。以下是一些最佳实践：

模块化开发：利用 AT-UI 的模块化特性，将项目拆分为多个组件，提高代码的可维护性和复用性。
样式一致性：通过使用 AT-UI 提供的独立 CSS 样式，确保整个应用程序的视觉一致性。
响应式设计：虽然 AT-UI 主要针对桌面应用，但通过适当的调整，也可以实现响应式设计，适应不同屏幕尺寸。

典型生态项目

AT-UI 作为一个基于 Vue.js 的 UI 框架，与 Vue.js 生态系统紧密结合。以下是一些典型的生态项目：

Vue CLI：使用 Vue CLI 可以快速搭建基于 AT-UI 的项目结构，简化开发流程。
Vuex：结合 Vuex 进行状态管理，确保应用程序的状态一致性和可预测性。
Vue Router：利用 Vue Router 进行页面导航和路由管理，构建复杂的单页应用程序。

通过结合这些生态项目，可以进一步扩展 AT-UI 的功能，构建更加强大和灵活的桌面应用程序。

"AT-UI 是一个基于 Vue.js 的高质量 UI 组件库，提供了一整套 UI 组件，包括 Button、Input、Select、Tag、Tooltip、Popover、Modal、Collapse、Slide、Carousel 等常用组件，以及 Timeline、Tree、Tabs、Breadcrumb、Pagination 等布局组件。AT-UI 的设计风格简约、扁平化，色彩搭配优雅，适合用于构建现代化的 web 应用程序。它的组件库非常丰富，并且每个组件都经过了精心设计和优化，性能表现良好。同时，AT-UI 的文档也非常详细，包括各种示例和 API 说明，方便开发者快速上手使用。"

项目地址：https://gitcode.com/gh_mirrors/at/at-ui

登录后查看全文

项目优选

收起

deepin linux kernel

OpenHarmony documentation | OpenHarmony开发者文档

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

Ascend Extension for PyTorch

flutter_flutter

ohos_react_native

React Native鸿蒙化仓库

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用

华为昇腾面向大规模分布式训练的多模态大模型套件，支撑多模态生成、多模态理解。