Vue.js开源:Rubik UI - Material Design 风格的轻量组件库
RodneyLittl
8年前
<h2>关于</h2> <p>Rubik UI 是一个基于 Vue.js 2.0+ 的开源 UI 组件库,在交互和视觉设计上遵循 Material Design 规范,适用于 PC 端和 mobile 端。</p> <p>这是个从 jQuery 版本的 Material Design UI 组件库改版而来,内部系统已经开始使用,开源版本还在开发完善中。</p> <h2>GitHub</h2> <p><a href="/misc/goto?guid=4959734817316512793" rel="nofollow,noindex">https://github.com/ccforward/rubik</a></p> <h2>NPM</h2> <h2>兼容</h2> <p>支持 Vue.js 2.0+,不支持 Vue.js 1.x</p> <h2>Demo</h2> <p><a href="/misc/goto?guid=4959734817403781678" rel="nofollow,noindex">https://ccforward.github.io/rubik/</a></p> <h2>使用</h2> <p>npm 安装</p> <pre> <code class="language-javascript">$ npm install i-rubik --save $ yarn add i-rubik</code></pre> <p>Rubik 初始化</p> <pre> <code class="language-javascript">import Vue from 'vue' import Rubik from 'i-rubik' Vue.use(Rubik) export default { name: 'app', mounted(){ this.$rubik.init() } }</code></pre> <h3>引入字体</h3> <pre> <code class="language-javascript"><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" type="text/css"></code></pre> <h3>引入css</h3> <pre> <code class="language-javascript"><link href="./node_modules/i-rubik/dist/rubik.min.css" rel="stylesheet" type="text/css"></code></pre> <h2>相关开源项目</h2> <p>Rubik UI 的部分组件和样式代码参考了以下项目</p> <p>在此表示感谢</p> <ul> <li><a href="/misc/goto?guid=4958862032806464243" rel="nofollow,noindex">materializecss</a></li> <li><a href="/misc/goto?guid=4959007488104018325" rel="nofollow,noindex">material-ui</a></li> <li><a href="/misc/goto?guid=4959734817537325003" rel="nofollow,noindex">iview</a></li> <li><a href="/misc/goto?guid=4959734817617724670" rel="nofollow,noindex">vuetify</a></li> </ul> <p> </p> <p> </p>