[开源]基于 Vite 构建移动端 Vue2、Vue3、组件库(支持小程序开发)

一飞开源,介绍创意、新奇、有趣、实用的免费开源应用、系统、软件、硬件及技术,一个探索、发现、分享、使用与互动交流的开源技术社区平台。致力于打造活力开源社区,共建开源新生态!

一、开源项目简介

京东风格的轻量级 Vue 组件库,支持移动端 H5 和 小程序开发

Nut[nʌt],源自电影《冰河世纪》里松鼠 Scrat "执迷不悟",一生追求,即便引发大灾难也绝不松手的坚果。

二、开源协议

使用MIT开源协议

三、界面展示

四、功能概述

特性

70+ 高质量组件,覆盖移动端主流场景 支持一套代码同时开发 H5+多端小程序 基于京东APP 10.0 视觉规范 支持按需引用 详尽的文档和示例 支持 TypeScript 支持服务端渲染(测试阶段) 支持组件级别定制主题,内置 700+ 个变量 国际化支持,已支持英文,印尼语和繁体中文 单元测试覆盖率超过 80%,保障稳定性 提供 Sketch 设计资源

五、技术选型

安装

// Vue2 项目 npm i @nutui/nutui@2// Vue3 H5 项目 npm i @nutui/nutui// Vue3 小程序项目 npm i @nutui/nutui-taro

示例

import { createApp } from "vue"; import App from "./App.vue"; // 注意:这种方式将会导入所有组件 import NutUI from "@nutui/nutui"; // 采用按需加载时 此全局css样式,需要删除 import "@nutui/nutui/dist/style.css"; createApp(App).use(NutUI).mount("#app");

学习资源

NutUI 实战快速入门

awesome-nutui

主题

我们提供了几套官方主题,来自京东内部实际业务,欢迎在项目中使用,如果不能满足需求,你也可以 自定义主题

京东APP视觉(Vue3,默认)京东科技视觉(Vue3)京东零售B商城主题(Vue3)京东企业业务主题(Vue3)京东物流视觉(Vue2)

版本说明

@nutui/nutui 和 @nutui/nutui-taro 属于并行版本,存在部分差异,版本号始终保持一致。如果兼容 ios 10 以下请使用 @nutui/nutui@2

NutUI 2x & NutUI-JDL 使用 Vue2 开发,支持现代浏览器及 Android >= 4.0、iOS >= 8.0,仅 H5 应用。NutUI 3x 使用 Vue3 开发,支持现代浏览器及 Chrome >= 51、iOS >= 10.0,可输出 H5 和小程序两类应用。

构建版本

AMD 环境、Webpack、Vite 等构建工具环境、服务端建议使用 es 版,非模块化环境(如通过 <script> 标签直接引用)建议使用 umd 压缩版。

es nutui.es.jsumd nutui.umd.js

使用案例

NutUI 已经投入了我们的生产环境中使用,业界也在广泛地使用 NutUI 开发多端应用。

具体案例,请查阅 README.md 文档

六、源码地址

访问一飞开源:https://code.exmay.com/