npm 包 gongyi 使用教程

在前端开发中，npm 是非常重要的工具。npm 包可以让我们快速地使用轮子（已有的开源代码），从而节省了很多时间，gongyi 就是这样一个 npm 包。

前言

gongyi 是一款基于 Vue.js 的移动端 UI 框架，提供了常用的 UI 组件，如按钮、表单、导航等。gongyi 的主要目标是为移动端开发提供快速、简洁的 UI 解决方案。

安装

使用 gongyi 前，我们需要先安装它。在命令行中，运行以下代码即可完成安装：

npm install gongyi --save

安装完成后，在项目中引入 gongyi。

全局引入

在 main.js 中添加以下代码：

import Vue from 'vue'
import Gongyi from 'gongyi'
import 'gongyi/dist/gongyi.css'

Vue.use(Gongyi)

局部引入

在需要使用 gongyi 的组件中添加以下代码：

import { Button } from 'gongyi'
import 'gongyi/dist/gongyi.css'

export default {
  components: {
    'g-button': Button
  }
}

使用

gongyi 提供了许多常用的 UI 组件，下面我们来一一介绍。

Button

Button 是 gongyi 的按钮组件，可以设置不同的样式和状态。在需要使用按钮的组件中，使用以下代码即可添加一个按钮：

<g-button type="primary">确认</g-button>

Input

Input 是 gongyi 的输入框组件，提供了多种类型的输入框，并且支持校验。在需要使用输入框的组件中，使用以下代码即可添加一个输入框：

<g-input v-model="value" label="用户名" placeholder="请输入用户名"></g-input>

Radio

Radio 是 gongyi 的单选框组件，支持设置不同的选项。在需要使用单选框的组件中，使用以下代码即可添加一个单选框：

<g-radio-group v-model="value">
  <g-radio label="male">男</g-radio>
  <g-radio label="female">女</g-radio>
</g-radio-group>

Checkbox

Checkbox 是 gongyi 的复选框组件，支持设置不同的选项。在需要使用复选框的组件中，使用以下代码即可添加一个复选框：

<g-checkbox-group v-model="value">
  <g-checkbox label="apple">苹果</g-checkbox>
  <g-checkbox label="banana">香蕉</g-checkbox>
  <g-checkbox label="orange">橘子</g-checkbox>
</g-checkbox-group>

Switch

Switch 是 gongyi 的开关组件，在需要使用开关的组件中，使用以下代码即可添加一个开关：

<g-switch v-model="value"></g-switch>

总结

gongyi 是一款非常实用的移动端 UI 框架，并且使用起来非常方便。以上介绍的只是 gongyi 的部分功能，更多功能请参考官方文档，建议学习和使用。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e71255dee6beeee74c1