Skip to content

Taoja/vuti

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

autobuild Downloads Version License install size cdn

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

特点

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

使用

support

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