Build PC Web Interfaces Fast with AT-UI Vue.js Component Library

AT-UI is a front‑end UI component library built on Vue.js 2.0, designed for rapid development of PC‑style web products.

Features

UI components developed with Vue Workflow based on npm, webpack and Babel, supporting ES2015

Independent CSS styles ensure a consistent UI across different frameworks (see AT‑UI Style)

Friendly API allows flexible component usage

Browser Support

Modern browsers and IE9+

Electron

Installation

Recommended via npm npm install at-ui Or include globally with a <script> tag

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

Usage

Because AT‑UI’s styles are packaged separately, you must install at-ui-style before using AT‑UI. Install it via npm or link the stylesheet directly. npm install at-ui-style Or include the CSS file:

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

Global Component Usage

Import all components or the needed ones in the project entry file.

import Vue from 'vue'
import AtComponents from 'at-ui'
import 'at-ui-style' // import component styles

Vue.use(AtComponents)

After global registration you can call AT‑UI’s instance methods directly, such as:

this.$Message.success(config)
this.$Notify(config)
this.$Loading.start()
this.$Modal.alert(config)

Single Component Usage

Register a component locally for use in a specific page, which is useful when combining with other frameworks.

import { AtInput } from 'at-ui'

export default {
  components: { AtInput },
  data() {
    return { value: 'O2Team' }
  }
}

In the template, use the component with <at-input></at-input> and bind data via v-model:

<template>
  <div>
    <at-input v-model="value" placeholder="请输入..."></at-input>
  </div>
</template>

Local Development

$ git clone [email protected]:o2team/at-ui.git
$ npm install
$ npm run dev

Contribution

If you encounter issues or have suggestions while using AT‑UI, feel free to open an Issue or submit a Pull Request on the repository.