快速了解
完整资料
资料已展开关于 AliTelecom UI System
由阿里通信技术团队打造基于Vue2.0的Web组件库,目前支撑了阿里天机,阿里大于,优酷移动,以及阿里通信内部的中后台项目
部分实现借鉴了 ant.design 文档系统使用了ant.design的文档系统bisheng
特性
Vue实现的PC端组件库,对于不习惯React JSX语法的同学,是一个不错的选择
一共30+组件,组件视觉交互参考antd实现
基于 npm + webpack + babel 的工作流,支持 ES2015
快速上手
第一个例子
可以复制下面的代码运行一个最简单的demo,atui相关的js,css可以通过http://unpkg.com/atui/ 来访问,由于unpkg性能没有保障,建议生产环境使用npm包的方式引入或者copy一份源码发布到自己的cdn上
html
复制代码
<html>
<head>
<meta charset="utf-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="//unpkg.com/atui/dist/greater-blue.css">
</head>
<body>
<div id="app">
<v-button primary @click.native="onClick">这是一个按钮</v-button>
</div>
<!-- 先引入 Vue -->
<script src="//unpkg.com/vue"></script>
<!-- 引入组件库 -->
<script src="//unpkg.com/atui"></script>
<script>
new Vue({
el:'#app',
components: {
// 注册组件
vButton: atui.Button
},
methods: {
onClick () {
alert('button click')
}
}
})
</script>
</body>
</html>
安装
使用npm安装#
可以通过npm直接安装到项目中,使用import 或 require 进行引用
js
复制代码
$ npm install atui --save
浏览器引入#
我们在npm发布包内的dist目录下提供了atui.js,atuiFilter.js,atuiWidget.js 三个主要的js文件 以及 greater-blue.css,tao-orange.css,tmall-red.css三个预打包的主题样式文件(大于蓝,淘宝橙,天猫红)用于一次性引入所有的atui组件(样式文件使用其中之一即可),也可以通过unpkg进行下载
示例
引入vue和atui
js
复制代码
import Vue from 'vue'
import atui from 'atui'
引入组件库样式
js
复制代码
import 'atui/dist/greater-blue.css'
注册atui组件
js
复制代码
new Vue({
el:'#app',
components: {
vButton: atui.Button,
vDatePicker: atui.DatePicker
},
methods: {
onClick () {
alert('button click')
}
}
})
在模版中使用
js
复制代码
<div id="app">
<v-button @click.native="onClick">click me</v-button>
<v-date-picker format="yyyy-MM-dd"></v-date-picker>
</div>
适合的使用方向
由阿里通信技术团队打造基于Vue2.0的Web组件库,目前支撑了阿里天机,阿里大于,优酷移动,以及阿里通信内部的中后台项目
由阿里通信技术团队打造基于Vue2.0的Web组件库,目前支撑了阿里天机,阿里大于,优酷移动,以及阿里通信内部的中后台项目
由阿里通信技术团队打造基于Vue2.0的Web组件库,目前支撑了阿里天机,阿里大于,优酷移动,以及阿里通信内部的中后台项目
收录线索
内容根据公开资料整理;版本、兼容性与服务状态请以官网最新说明为准。
