vuti

vuti是一套基于vmin、var、calc等css3新特性的UI框架。通过变量复用、计算属性实现组件变量化。

特点

+ 高扩展性：通过修改css3全局变量，组件局部变量来达到变更主题风格。
+ 轻量：摒弃通过css扩展语言，组件主体使用标准js写法，减少代码编译成本。
+ 插件化：组件事件、参数上升，注册时可自定义组件事件与参数。
+ 风格统一：组件通过一套规范化、变量化属性组成。
+ es模式: 支持treeshaking机制，导入时只会加载使用的组件相关代码。
+ UMD模式: 支持Commonjs、iife、amd方式引用

使用


$3

安装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
},
...
`

$3

在页面入口引入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

使用文档请访问, demo请访问

Github

+ 源码
+ issures