Grape-ui NPM | npm.io

An easy UI components based on Vue.

NPM

grape-UI 是一个实用的 UI 简易框架，目前提供了一些常用组件（不定期更新），适合 PC 端和移动端使用。

介绍

这是我在学习 Vue 的过程中造的一组轮子，希望对你有用

开始使用

1. 添加CSS样式

使用本框架前，请在 CSS 中开启 border-box(IE 8 及以上浏览器支持此样式)

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

2. 安装

安装 grape-ui

npm i --save grape-ui

或者

yarn add grape-ui

3. 引入grape-ui

全局引入

import Vue from 'vue'
import "grape-ui/dist/index.css";
import { Button, ButtonGroup, Row, Col, Icon, Input} from 'grape-ui'

Vue.component('g-button', Button)
Vue.component('g-icon', Icon)
Vue.component('g-button-group', ButtonGroup)
Vue.component('g-input', Input)
Vue.component('g-row', Row)
Vue.component('g-col', Col)

模块化引用

import Vue from 'vue'
import "grape-ui/dist/index.css";
import { Button, ButtonGroup, Row, Col, Icon, Input} from 'grape-ui'

export default {
    name: 'app',
    components: {
        'g-button-group': ButtonGroup,
        'g-button': Button,
        'g-icon': Icon,
        'g-input': Input,
        'g-row': Row,
        'g-col': Col
    }
}