uniapp-nutui

UniAPP-NutUi

京东风格的轻量级 Uniapp 组件库，支持移动端 H5 和 小程序开发

   

介绍

uniapp-nutui 组件库，基于Taro版NutUi 4.x版本修改而来，适配了uni-app, 使用 Vue 技术栈开发小程序应用，开箱即用，拥有丰富的业务组件。

使用请参考快速开始。

特性

• 🚀 80+ 高质量组件，覆盖移动端主流场景
• 💪 支持一套代码同时开发多端
• 📖 基于京东 APP 10.0 视觉规范
• 🍭 支持按需引用
• 💪 支持 TypeScript
• 💪 支持动态定制主题
• 🍭 支持暗黑模式
• 🌍 支持国际化

安装

uniapp-nutui 提供了 npm 包和 uni_modules 包两种方式使用组件。虽然提供了uni_modules，但是组件库在 hbuilder中编译存在一些奇奇怪怪的问题，因此仅推荐使用 vite cli，并且能够提供更好的 ts支持与开发体验

方式一：npm

pnpm add uniapp-nutui

使用

使用 @uni-helper/vite-plugin-uni-components 自动导入组件。

pnpm add @uni-helper/vite-plugin-uni-components -D

// vite.config.ts
import { defineConfig } from 'vite'

import Components from '@uni-helper/vite-plugin-uni-components'
import { NutResolver } from 'uniapp-nutui'

// https://vitejs.dev/config/
export default defineConfig({
  // ...
  plugins: [
    // ...
    Components({
      resolvers: [NutResolver()],
    }),
  ],
})

样式引入

在项目文件 app.vue 文件中添加如下代码：

@import 'uniapp-nutui/styles/index';

导入样式变量

// vite.config.ts
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  // ...
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "uniapp-nutui/styles/variables.scss";',
      },
    },
  },
})

现在只需使用一个组件，它将按需自动导入。

<template>
  <nut-button type="primary">
        主要按钮
  </nut-button>
</template>

方式二：uni_modules

前往 uniapp插件市场下载 nutui-uniapp

使用方式可查看安装。

感谢

• ano-ui
• NutUi
• Uni-NutUi
• vin-ui
• uni-helper

License

MIT License © 2022-PRESENT Yang1206 and all contributors.