Skip to main content
Version: Next

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>