taoja / vuti

高扩展性的前端UI框架

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

特点

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

使用

es6用法

安装vuti依赖包

$ npm install vuti

在工程入口引入vuti或全局注册组件

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组件

import { tCell, vPopup as tPopup } from 'vuti'

...,
  components: {
    tCell,
    vPopup
  },
...

browser用法

在页面入口引入js库

// 引入vue
<script src="https://raw.githubusercontent.com/vuejs/vue/dev/dist/vue.min.js"></script>
// 引入vuti
<script src="https://cdn.jsdelivr.net/npm/vuti@1/dist/vuti.min.js"></script>

通过Vue注册公共组件来使用

let {plugins, tCell, tButton, ...} = Vuti

Vue.use(plugins)

Vue.component('tCell', tCell)
Vue.component('tButton', tButton)
new Vue({
  ...
})

注册Vue局部组件

let {tCell, tButton, ...} = Vuti
new Vue({
  components: {
    tCell,
    tButton
  },
  ...
})

文档与demo

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

Github

• 源码
• issures

vuti's Issues

test

test