AT-UI 开源项目教程

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

A fresh and flat UI-Kit specially for desktop application, made with ♥ by Vue.js 2.0 (DEPRECATED)

项目地址：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 的功能，构建更加强大和灵活的桌面应用程序。

A fresh and flat UI-Kit specially for desktop application, made with ♥ by Vue.js 2.0 (DEPRECATED)

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

登录后查看全文

热门内容推荐

1 编程实践项目探索指南：从零构建技术能力体系 2 技术解构式学习：从0到1构建你的编程知识体系 3 构建自己的技术世界：build-your-own-x项目的实践探索指南 4 解锁编程技能的实践之旅：从零构建你的技术世界 5 技术实践探索：从零开始构建核心系统的实践指南 6 亲手锻造技术引擎：从0到1构建核心系统的实践指南

项目优选

收起

ops-transformer

本项目是CANN提供的transformer类大模型算子库，实现网络在NPU上加速计算。

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

Ascend Extension for PyTorch

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

deepin linux kernel

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

flutter_flutter

用户可使用该项目在 OpenHarmony 平台开发应用，支持通过 IDE 或终端用 Flutter Tools 指令编译构建，基于 Flutter 3.27.4 版本，新增 impeller-vulkan 渲染模式，兼容多种开发指令与环境配置。

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

CANNBot 是面向 CANN 开发的用于提升开发效率的系列智能体，本仓库为其提供可复用的 Skills 模块。