vin ui

京東風格的輕量級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 的代碼，然後將打包後的代碼拷貝到自己的項目中：

1. 克隆倉庫代碼：

git clone https://github.com/vingogo/vin-ui.git

2. 安裝依賴：

pnpm i

3. 在packages/uni-ui目錄對VinUI 的代碼做符合業務的個性化調整
4. 構建代碼, 將把原有的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" : [
    // ......
  ]
}

2. 引入樣式

在項目入口文件main.ts 或者main.js 文件中添加如下代碼：

 import '@vingogo/uni-ui/lib/style.css' ;

3. 在項目中使用：

< vin-button type="primary">button</ vin-button >

項目運行

項目推薦使用pnpm 的方式安裝運行，啟動方式：

1. 安裝依賴

pnpm i

2. 運行h5 或者小程序

pnpm run dev

3. 根據交互式命令行選項選擇要運行的環境
4. 在瀏覽器或者指定小程序端運行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
• ? 支持國際化

鏈接

• 組件使用文檔
• Github
• Gitee
• uniapp 市場插件

聯繫

有關VinUI 的問題，歡迎添加微信交流，加微信請備註：VinUI