Skip to main content
Version: 3.x

Using NutUI Jingdong Style Component Library

Note: NutUI must currently be developed using taro version 3.x + vue3 technology stack.

In order to provide developers with a more efficient and convenient way to develop, Taro and NutUI have joined forces and are now available with NutUI to develop mini program,NutUI provides 30+ components covering most of the components used in daily business development。

Taro3 supports development using the NutUI component library, sample repository: taro3-nutui

Preview Experience

NutUINutUI

How to Use

Installation

  • Use Npm or Yarn Install

Install Taro cli

# use npm install CLI
npm install -g @tarojs/cli

# OR use yarn install CLI
yarn global add @tarojs/cli

# OR installed cnpm,use cnpm install CLI
cnpm install -g @tarojs/cli

It is worth mentioning that if the installation process results in sass-related installation errors, please retry after installing mirror-config-china.

npm install -g mirror-config-china

Check if the installation is successful

taro -v

Project initialization

Use the command to create a template:

taro init myApp

Select the Vue3 + NutUI template according to the image below in order

NPM Usage examples

import { createApp } from "vue";
import App from "./App.vue";
import NutUI from "@nutui/nutui-taro";
import "@nutui/nutui-taro/dist/style.css";
createApp(App).use(NutUI);

Note: This method will import all components

import { createApp } from "vue";
import App from "./App.vue";
import { Button, Cell, Icon } from "@nutui/nutui-taro";
import "@nutui/nutui-taro/dist/style.css";
createApp(App).use(Button).use(Cell).use(Icon);

Customized theme usage

First you need to configure the app.ts file to use scss style files such as

import { createApp } from "vue";
import App from "./App.vue";
import { Button, Cell, Icon } from "@nutui/nutui-taro";
// Customized themes must use scss
import '@nutui/nutui-taro/dist/styles/themes/default.scss';
createApp(App).use(Button).use(Cell).use(Icon);

Create custom theme style files assets/styles/custom_theme.scss ,Style variable override table reference nutui variables

custom_theme.scss

$primary-color: #478EF2;
$primary-color-end: #496AF2;

The scss file then needs to be configured in the config/index.js file to globally override e.g:

const path = require('path');
const config = {
deviceRatio: {
640: 2.34 / 2,
750: 1,
828: 1.81 / 2,
375: 2 / 1
},
sass: {
resource: [
path.resolve(__dirname, '..', 'src/assets/styles/custom_theme.scss')
]
},
// ...

Use in vue files to see the effect

<template>
<view>
<nut-button type="primary" >nutui</nut-button>
</view>
</template>