京东风格的轻量级 Vue 组件库,支持移动端 H5 和 小程序开发
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 的代码,然后将打包后的代码拷贝到自己的项目中:
- 克隆仓库代码:
git clone https://github.com/vingogo/vin-ui.git
- 安装依赖:
pnpm i
- 在
src/uni_modules/vin-ui
目录对 VinUI 的代码做符合业务的个性化调整 - 构建代码, 将把原有的 TS 文件生成编译后的 JS 文件,并转成 ES2015
pnpm build:uni
在 dist/uni_modules
下生成供拷贝的文件
使用方式
- 在
pages.json
中添加 easycom 配置:
{
"easycom": {
// 此处根据实际文件位置进行修改,如下为通过 npm 包安装的方式配置
"^vin-(.*)": "@vingogo/uni-ui/lib/components/$1/index.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
- 引入样式
在项目入口文件 main.ts 或者 main.js 文件中添加如下代码:
import '@vingogo/uni-ui/lib/style.css';
- 在项目中使用:
<vin-button type="primary">button</vin-button>
关于项目
在结合 pnpm/yarn workspace + uniapp 使用上发现 uniapp 对软链接的支持不是很好,将原有 workspace 改成现有形式,主要目录如下:
- docs: 文档相关
- src: 代码主要内容,用于发发布 h5 和小程序
- src/uni_modules: 放置 VinUI 核心代码,该目录下的代码用于发布 npm 包(@vingogo/uni-ui)和 uniapp 市场插件
项目运行
项目推荐使用 pnpm 的方式安装运行,启动方式:
- 安装依赖
pnpm i
- 运行 h5 或者小程序
pnpm dev
- 根据交互式命令行选项选择要运行的环境
- 在浏览器或者指定小程序端运行 dist/dev 文件夹下代码
VinUI 组件构建
- 构建 npm 版本代码:
pnpm build:lib
执行完上面命令将在 dist/npm
下生成用于发布 npm 的代码
- 构建 uni_modules 版本代码:
pnpm build:uni
执行完上面命令将在 dist/uni_modules
下生成用于发布 uniapp 市场的代码
VinUI 特性
- 🚀 50+ 高质量组件,覆盖移动端主流场景
- 💪 支持动态定制主题、支持组件级别定制主题
- 📖 基于京东视觉规范
- 🍭 支持暗黑模式
- 💪 支持一套代码同时开发 H5+多端小程序
- 💡 支持 vscode 组件属性高亮
- 🍭 支持按需引用
- 📖 详尽的文档和示例
- 💪 支持 TypeScript
- 🌍 支持国际化
链接
联系
有关 VinUI 的问题,欢迎添加微信交流,加微信请备注:VinUI