京东风格的轻量级 Vue 组件库,支持移动端 H5 和 小程序开发
VinUI 参考 NutUI(京东风格的轻量级移动端组件库)的设计和实现,在 Taro 小程序组件库版本 NutUI-Vue 基础上实现的 uniapp 版本
针对 uniapp 的一些特性进行了修改和调整,同时增加一些新的组件,对一些组件功能也有所增强
可参考项目文档:快速开始
VinUI 提供了 npm 包和 uni_modules 包的方式安装组件。
# Using npm
npm install @vingogo/uni-ui
# Using yarn
yarn add @vingogo/uni-ui
# Using pnpm
pnpm add @vingogo/uni-ui
uniapp 市场插件地址:https://ext.dcloud.net.cn/plugin?id=11187
通过 Github 下载 VinUI 的代码,然后将打包后的代码拷贝到自己的项目中:
git clone https://github.com/vingogo/vin-ui.git
pnpm i
packages/uni-ui
目录对 VinUI 的代码做符合业务的个性化调整pnpm run build:uni
在 packages/uni-ui/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 的方式安装运行,启动方式:
pnpm i
pnpm run dev
pnpm run build:lib
执行完上面命令将在 packages/uni-ui/lib
下生成用于发布 npm 的代码
pnpm run build:uni
执行完上面命令将在 packages/uni-ui/uni_modules
下生成用于发布 uniapp 市场的代码
有关 VinUI 的问题,欢迎添加微信交流,加微信请备注:VinUI
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。