https://github.com/vingogo/vin-ui
京东(nutui)风格的移动端 Vue3 组件库 、支持多端小程序(uniapp版本)
https://github.com/vingogo/vin-ui
components nutui typescript uniapp vue3
Last synced: about 1 month ago
JSON representation
京东(nutui)风格的移动端 Vue3 组件库 、支持多端小程序(uniapp版本)
- Host: GitHub
- URL: https://github.com/vingogo/vin-ui
- Owner: vingogo
- License: mit
- Created: 2023-03-10T16:17:11.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-27T13:41:50.000Z (almost 3 years ago)
- Last Synced: 2025-05-02T16:54:11.743Z (about 1 year ago)
- Topics: components, nutui, typescript, uniapp, vue3
- Language: Vue
- Homepage:
- Size: 1.44 MB
- Stars: 49
- Watchers: 2
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-uni-app - vue3 - ui) - 京东（nutui）风格的移动端 Vue3 组件库 、支持多端小程序（uniapp 版本）。 --> (UI 组件库)
README
京东风格的轻量级 Vue 组件库，支持移动端 H5 和 小程序开发
---
VinUI 参考 [NutUI](https://github.com/jdf2e/nutui)（京东风格的轻量级移动端组件库）的设计和实现，在 Taro 小程序组件库版本 NutUI-Vue 基础上实现的 uniapp 版本
针对 uniapp 的一些特性进行了修改和调整，同时增加一些新的组件，对一些组件功能也有所增强
## 快速开始
可参考项目文档：[快速开始](https://vingogo.cn/docs/guide/quickstart.html)
### 安装
VinUI 提供了 npm 包和 uni_modules 包的方式安装组件。
#### 方式一：npm 安装运行
```bash
# 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](https://ext.dcloud.net.cn/plugin?id=11187)
#### 方式三：通过下载代码
通过 [Github](https://github.com/vingogo/vin-ui) 下载 VinUI 的代码，然后将打包后的代码拷贝到自己的项目中：
1. 克隆仓库代码：
```bash
git clone https://github.com/vingogo/vin-ui.git
```
2. 安装依赖：
```bash
pnpm i
```
3. 在 `packages/uni-ui` 目录对 VinUI 的代码做符合业务的个性化调整
4. 构建代码, 将把原有的 TS 文件生成编译后的 JS 文件，并转成 ES2015
```bash
pnpm run build:uni
```
在 `packages/uni-ui/uni_modules` 下生成供拷贝的文件
### 使用方式
1. 在 `pages.json` 中添加 easycom 配置：
```json
{
"easycom": {
// 此处根据实际文件位置进行修改，如下为通过 npm 包安装的方式配置
"^vin-(.*)": "@vingogo/uni-ui/lib/components/$1/index.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
```
2. 引入样式
在项目入口文件 main.ts 或者 main.js 文件中添加如下代码：
```js
import '@vingogo/uni-ui/lib/style.css';
```
3. 在项目中使用：
```vue
button
```
### 项目运行
项目推荐使用 pnpm 的方式安装运行，启动方式：
1. 安装依赖
```bash
pnpm i
```
2. 运行 h5 或者小程序
```bash
pnpm run dev
```
3. 根据交互式命令行选项选择要运行的环境
4. 在浏览器或者指定小程序端运行 example/dist/dev 文件夹下代码
### VinUI 组件构建
- 构建 npm 版本代码：
```bash
pnpm run build:lib
```
执行完上面命令将在 `packages/uni-ui/lib` 下生成用于发布 npm 的代码
- 构建 uni_modules 版本代码：
```bash
pnpm run build:uni
```
执行完上面命令将在 `packages/uni-ui/uni_modules` 下生成用于发布 uniapp 市场的代码
## VinUI 特性
- 🚀 50+ 高质量组件，覆盖移动端主流场景
- 💪 支持动态定制主题、支持组件级别定制主题
- 📖 基于京东视觉规范
- 🍭 支持暗黑模式
- 💪 支持一套代码同时开发 H5+多端小程序
- 💡 支持 vscode 组件属性高亮
- 🍭 支持按需引用
- 📖 详尽的文档和示例
- 💪 支持 TypeScript
- 🌍 支持国际化
## 链接
- [组件使用文档](https://vingogo.cn/docs/index.html)
- [Github](https://github.com/vingogo/vin-ui)
- [Gitee](https://gitee.com/vingogo/vin-ui)
- [uniapp 市场插件](https://ext.dcloud.net.cn/plugin?id=11187)
## 联系
有关 VinUI 的问题，欢迎添加微信交流，加微信请备注：VinUI
