AT-UI - 凹凸实验室官方UI框架

2017/08/03 08:45
阅读数 136

一款基于 Vue.js 2.0 的前端 UI 组件库,主要用于快速开发 PC 网站产品。

特性

  • 基于 Vue 开发的 UI 组件

  • 基于 npm + webpack + babel 的工作流,支持 ES2015

  • CSS 样式独立,保证不同的框架实现都能保持统一的 UI 风格( 详见:AT-UI Style 

  • 提供友好的 API,可灵活的使用组件

浏览器支持

  • 现代浏览器和 IE9 及以上

  • Electron

安装

  • 推荐使用 npm 安装

npm install at-ui
  • 也可以使用 <script> 全局引用

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

使用

由于 AT-UI 的样式独立成了单独的项目,所以在使用 AT-UI 前,需要安装 at-ui-style。可采用 npm 的方式安装,或者使用 <script> 标签的方式引入样式文件。

npm install at-ui-style

或者

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

全局组件使用

可以在项目的入口文件中引入所有组件或者所需组件

import Vue from 'vue'
import AtComponents from 'at-ui'
import 'at-ui-style' // 引入组件样式

// import 'at-ui-style/src/index.scss'    // 或者引入未构建的 scss 样式

Vue.use(AtComponents)

如果全局引入了所有组件,那么可以直接使用 AT-UI 的全局实例方法

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

单个组件使用

可以在单独的页面中局部注册所需的组件,适用于与其他框架组合使用的场景

import { AtInput } from 'at-ui'

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

在模板中,使用 <at-input></at-input> 的方式使用组件,并且用 v-model 的语法实现动态绑定

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

本地开发

$ git clone git@github.com:o2team/at-ui.git
$ npm install
$ npm run dev

贡献

如果你在使用 AT-UI 时遇到问题,或者有好的建议,欢迎给我们提 Issue Pull Request


本文分享自微信公众号 - 凹凸实验室(AOTULabs)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部