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
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
Recommended to use load-on-demand
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>