vuti是一套基于vmin、var、calc等css3新特性的UI框架。通过变量复用、计算属性实现组件变量化。
特点
- 高扩展性:通过修改css3全局变量,组件局部变量来达到变更主题风格。
- 轻量:摒弃通过css扩展语言,组件主体使用标准js写法,减少代码编译成本。
- 插件化:组件事件、参数上升,注册时可自定义组件事件与参数。
- 风格统一:组件通过一套规范化、变量化属性组成。
- es模式: 支持treeshaking机制,导入时只会加载使用的组件相关代码。
- UMD模式: 支持Commonjs、iife、amd方式引用
使用
es6用法
安装vuti依赖包
$ npm install vuti
在工程入口引入vuti或全局注册组件
/** * 可使用插件模式调用组件 */Vue /** * 全局注册组件 */Vue /** * vuti.set设置全局变量 */vuti
局部注册vuti组件
... components: tCell vPopup ...
browser用法
在页面入口引入js库
// 引入vue// 引入vuti
通过Vue注册公共组件来使用
let plugins tCell tButton ... = Vuti Vue VueVue ...
注册Vue局部组件
let tCell tButton ... = Vuti components: tCell tButton ...