npm 包 Ning.js 使用教程

Ning.js 是一款适用于前端开发的 npm 包，它提供了基于 Vue.js 的组件库，包含常用的 UI 组件和一些常用的工具函数。本文将介绍如何使用 Ning.js 包来加快前端开发的速度。

安装

使用 npm 安装 Ning.js。

npm install ning.js

使用

在项目中引用 Ning.js，并在 Vue 中注册组件。

import Vue from 'vue'
import Ning from 'ning.js'

Vue.use(Ning)

// 使用 button 组件
<ning-button>按钮</ning-button>

组件

Ning.js 提供了一些常用的 UI 组件，可以在项目中方便地进行复用。

Button 按钮

Ning.js 的按钮组件提供了多样化的按钮样式和大小，支持了加载状态和禁用状态，并且可以通过自定义 slot 插槽来添加自定义内容。

<ning-button>默认按钮</ning-button>
<ning-button type="primary">主要按钮</ning-button>
<ning-button type="success">成功按钮</ning-button>
<ning-button type="warning">警告按钮</ning-button>
<ning-button type="danger">危险按钮</ning-button>

Input 输入框

Ning.js 的输入框组件可以方便地输入或选择各种数据类型，并支持了清空图标、前缀/后缀图标等功能。

<ning-input placeholder="请输入文字"/>
<ning-input type="textarea" placeholder="多行输入框"/>
<ning-input-number :max="100" :min="0"/>
<ning-datepicker/>

Icon 图标

Ning.js 的图标组件包含了丰富多样的图标库，可以方便地加入各种图标到页面中。

<ning-icon name="check"/>
<ning-icon name="close"/>
<ning-icon name="plus"/>
<ning-icon name="minus"/>

工具函数

Ning.js 提供了一些常用的工具函数，方便了前端开发人员的编码工作。

Validation 校验工具

Ning.js 的 Validation 工具类提供了常用的校验方法，如手机号码、邮箱地址、身份证号码等的校验。

import { Validation } from 'ning.js'

console.log(Validation.isPhone('12345678901')) // true
console.log(Validation.isEmail('test@example.com')) // true
console.log(Validation.isIdCard('421088199001012345')) // true

Utils 常用工具

Ning.js 的 Utils 工具类提供了一些常用的工具方法，方便开发人员完成一些常用的操作。

import { Utils } from 'ning.js'

console.log(Utils.randomString(8)) // 生成一个 8 位的随机字符串

总结

Ning.js 是一款非常实用的前端工具包，它提供了丰富的 UI 组件和常用的工具函数，可以帮助前端开发人员快速地构建页面和提高开发效率。在具体的项目开发中，参考 Ning.js 的组件和工具函数，可以方便地完成常用的开发任务。

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