Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

vingogo/vin-ui

Open more actions menu

Repository files navigation

logo

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

PRs Welcome license

GitHub contributors GitHub commit activity GitHub commits since latest release (by date) GitHub Release Date

网页端二维码   微信二维码   支付宝二维码


VinUI 参考 NutUI(京东风格的轻量级移动端组件库)的设计和实现,在 Taro 小程序组件库版本 NutUI-Vue 基础上实现的 uniapp 版本

针对 uniapp 的一些特性进行了修改和调整,同时增加一些新的组件,对一些组件功能也有所增强

快速开始

可参考项目文档:快速开始

安装

VinUI 提供了 npm 包和 uni_modules 包的方式安装组件。

方式一:npm 安装运行

# Using npm
npm install @vingogo/uni-ui

# Using yarn
yarn add @vingogo/uni-ui

# Using pnpm
pnpm add @vingogo/uni-ui

方式二:uniapp 插件市场下载

uniapp 市场插件地址:https://ext.dcloud.net.cn/plugin?id=11187

方式三:通过下载代码

通过 Github 下载 VinUI 的代码,然后将打包后的代码拷贝到自己的项目中:

  1. 克隆仓库代码:
git clone https://github.com/vingogo/vin-ui.git
  1. 安装依赖:
pnpm i
  1. packages/uni-ui 目录对 VinUI 的代码做符合业务的个性化调整
  2. 构建代码, 将把原有的 TS 文件生成编译后的 JS 文件,并转成 ES2015
pnpm run build:uni

packages/uni-ui/uni_modules 下生成供拷贝的文件

使用方式

  1. pages.json 中添加 easycom 配置:
{
  "easycom": {
    // 此处根据实际文件位置进行修改,如下为通过 npm 包安装的方式配置
    "^vin-(.*)": "@vingogo/uni-ui/lib/components/$1/index.vue"
  },
  // 此为本身已有的内容
  "pages": [
    // ......
  ]
}
  1. 引入样式

在项目入口文件 main.ts 或者 main.js 文件中添加如下代码:

import '@vingogo/uni-ui/lib/style.css';
  1. 在项目中使用:
<vin-button type="primary">button</vin-button>

项目运行

项目推荐使用 pnpm 的方式安装运行,启动方式:

  1. 安装依赖
pnpm i
  1. 运行 h5 或者小程序
pnpm run dev
  1. 根据交互式命令行选项选择要运行的环境
  2. 在浏览器或者指定小程序端运行 example/dist/dev 文件夹下代码

VinUI 组件构建

  • 构建 npm 版本代码:
pnpm run build:lib

执行完上面命令将在 packages/uni-ui/lib 下生成用于发布 npm 的代码

  • 构建 uni_modules 版本代码:
pnpm run build:uni

执行完上面命令将在 packages/uni-ui/uni_modules 下生成用于发布 uniapp 市场的代码

VinUI 特性

  • 🚀 50+ 高质量组件,覆盖移动端主流场景
  • 💪 支持动态定制主题、支持组件级别定制主题
  • 📖 基于京东视觉规范
  • 🍭 支持暗黑模式
  • 💪 支持一套代码同时开发 H5+多端小程序
  • 💡 支持 vscode 组件属性高亮
  • 🍭 支持按需引用
  • 📖 详尽的文档和示例
  • 💪 支持 TypeScript
  • 🌍 支持国际化

链接

联系

有关 VinUI 的问题,欢迎添加微信交流,加微信请备注:VinUI

wechat

About

京东(nutui)风格的移动端 Vue3 组件库 、支持多端小程序(uniapp版本)

Topics

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Morty Proxy This is a proxified and sanitized view of the page, visit original site.