vuti是一套基于vmin、var、calc等css3新特性的UI框架。通过变量复用、计算属性实现组件变量化。
## 特点
+ 高扩展性：通过修改css3全局变量，组件局部变量来达到变更主题风格。
+ 轻量：摒弃通过css扩展语言，组件主体使用标准js写法，减少代码编译成本。
+ 插件化：组件事件、参数上升，注册时可自定义组件事件与参数。
+ 风格统一：组件通过一套规范化、变量化属性组成。
+ es模式: 支持treeshaking机制，导入时只会加载使用的组件相关代码。
+ UMD模式: 支持Commonjs、iife、amd方式引用
## 使用
[](https://taoja.github.io/vuti)
### es6用法
安装vuti依赖包
```bash
$ npm install vuti
```
在工程入口引入vuti或全局注册组件
```js
import Vue from 'vue'
import vuti from 'vuti'
import { plugins, tButton } from 'vuti'
/**
* 可使用插件模式调用组件
*/
Vue.use(plugins)
/**
* 全局注册组件
*/
Vue.component('tButton', tButton)
/**
* vuti.set设置全局变量
*/
vuti.set({
'--color-t1': 'red',
...
})
```
局部注册vuti组件
```js
import { tCell, vPopup as tPopup } from 'vuti'
...,
components: {
tCell,
vPopup
},
...
```
### browser用法
在页面入口引入js库
```html
// 引入vue
// 引入vuti
```
通过Vue注册公共组件来使用
```js
let {plugins, tCell, tButton, ...} = Vuti
Vue.use(plugins)
Vue.component('tCell', tCell)
Vue.component('tButton', tButton)
new Vue({
...
})
```
注册Vue局部组件
```js
let {tCell, tButton, ...} = Vuti
new Vue({
components: {
tCell,
tButton
},
...
})
```
## 文档与demo
使用文档请[访问](https://taoja.github.io/vuti), demo请[访问](https://taoja.github.io/vuti)
## Github
+ [源码](https://github.com/Taoja/vuti)
+ [issures](https://github.com/Taoja/vuti/issures)