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>