Learn vue gulu

使用 vue 快乐地造轮子

Version: 0.0.3 Updated: 02/18/2019

By: ximuli License: MIT

Downloads Last 30 Days: 26

Install

npm i learn-vue-gulu
yarn add learn-vue-gulu

Repository: https://github.com/ximuli/learn-vue-gulu

CDNs

bundle.run: https://bundle.run/learn-vue-gulu

jsDelivr: https://cdn.jsdelivr.net/npm/learn-vue-gulu

unpkg: https://unpkg.com/learn-vue-gulu

learn-vue-gulu

Build Status

介绍

这是一个学习使用 vue 造轮子的 UI 组件库。

注意事项

本项目仅供学习交流,请不要在生产环境中使用。

开始使用

  1. 添加 CSS 样式

    使用本框架前,请在 CSS 中添加如下代码:

    *,*::before,*::after { box-sizing: border-box; }

    你还需要设置默认的样式变量(后续会修改为 SCSS 变量),目前 CSS 变量的兼容性并不理想。

    :root {
     --button-height: 32px;
     --font-size: 14px;
     --button-bg: #fff;
     --button-active-bg: #eee;
     --border-radius: 4px;
     --color: #333;
     --border-color: #999;
     --border-color-hover: #666;
    }
  2. 安装 learn-vue-gulu

    npm i --save learn-vue-gulu
  3. 引入 learn-vue-gulu

    import { Button, Icon, ButtonGroup } from 'learn-vue-gulu'
    import 'learn-vue-gulu/dist/index.css'
    export default {
     name: 'app',
     components: {
       'l-button': Button,
       'l-icon': Icon,
       'l-button-group': ButtonGroup
     }
    }

文档

提问

变更记录

联系方式

贡献代码

Categories: Vue js
Tags: vue