1 Star 2 Fork 2

@vin / vin-ui

Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README
MIT

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
MIT License Copyright (c) 2023 Alvin Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

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

Releases

No release

Contributors

All

Activities

Load More
can not load any more
TypeScript
1
https://gitee.com/vingogo/vin-ui.git
git@gitee.com:vingogo/vin-ui.git
vingogo
vin-ui
vin-ui
main

Search