Vue.js开源:Rubik UI - Material Design 风格的轻量组件库

RodneyLittl 5年前
   <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>