As a component library with JD style, we have been committed to creating a component library that is more in line with developers’ experience. After the launch of NutUI 3.0, our R&D team has been continuously optimizing, testing, using and iterating related components of Vue3. However, in the development process of cross-end small programs, we found that there was no suitable component library to support multi-end development. To fill this gap, and to optimize the developer experience and make NutUI more convenient for more developers, we decided to add the ability for small programs to adapt to each other in NutUI.

NutUI begins a multi-faceted journey

In the current business environment, research and development is faced with more and more complex business scenarios, more and more channels for product release, and many small program channels appear when the business has its own APP. In the past, research and development only need to pay attention to the APP and H5 of the business. Since wechat produced wechat small program, Major Internet companies in the industry have developed their own small program platforms, and there may be more and more in the future. Each small program platform has its own framework language. If the business releases one more channel, the research and development needs to write one more set of code. Writing a set of code that can be quickly reused into small programs is currently the primary pain point of development.

In order to provide developers with a more efficient and convenient way to develop, NutUI and Taro together, now can use NutUI to develop small programs, NutUI provides 30+ components covering most of the components used in daily business development.

The combination of the two, not only can let the developer a code, multi-terminal run, freely develop small programs. More can be used in the development process, more beautiful, more convenient, more rich components of the component library. We integrate NutUI and Taro more perfectly. Taro officially uses NutUI as the recommended component library of Vue technology stack. Developers will now be able to use NutUI to seamlessly develop H5 and multiterminal applets.

NutUI 3.0 new architecture upgrade

Since the NutUI 3.0 upgrade, we have made some changes to the framework. Here is the basic framework structure of NutUI 3.0. Compared to 2.0, we have made the following upgrades:

  • Webpack upgrade to Vite, development efficiency greatly improved
  • Fully embrace TypeScript
  • Vue3 support
  • Support small program development

The visual experience has been upgraded

A new look on the website

NutUI from 2.0 to 3.0 is not only a new upgrade in technology, the component library product image also takes on a new look, NutUI 3.0 from the official website, documents and Demo, we have been revised. After the revision of the home page, from the multidimensional display of NutUI component library platform characteristics and knowledge precipitation, for new users can better and systematic understanding of NutUI.

Component Document changes

In an era when users’ time and attention are scarce, as a tool-based platform, it is more necessary to help users achieve their goals in a convenient and efficient way. We have added a Tab to switch documents in the upper right corner of the document page, so that developers can find the relevant documents they want more efficiently. Now we have supported small program preview Demo. Scan the QR code on the right and you can directly view the small program Demo of NutUI 3.X component library.

Quick start small program development

The installation

  • Install by Npm or Yarn

Erection of Taro scaffold

Install the CLI using NPM
npm install -g @tarojs/cli

# OR Use Yarn to install the CLI
yarn global add @tarojs/cli

# OR install CNPM, use CNPM to install CLI
cnpm install -g @tarojs/cli
Copy the code

!!!!!!!!! It is worth mentioning that if any sass-related installation errors occur during the installation, please try again after installing mirror-config-China.

npm install -g mirror-config-china
Copy the code

Check whether the installation is successful

taro -v
Copy the code

Project initialization

Create a template using the following command:

taro init myApp
Copy the code

Select the Vue3 + NutUI template based on the image below

When selecting the vue3-Nutui template, there is a built-in loading on demand mode, and developers can choose to use it globally according to their own usage scenarios.

Load on Demand Example (recommended)

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);
Copy the code

Global Usage Example

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);
Copy the code

Note: This approach will import all components

In this way, you can quickly develop small program scenarios. The NutUI team will continue to iterate on multiple features to make the development experience more user-friendly.

future

With more and more NutUI users, React version is more and more popular. We will invest part of our energy into the development of React technology stack. Nutui-react will be released in Q4. We will continue to optimize and iterate the NutUI product experience, and the NutUI team will continue to enrich components on the Vue version; In order to satisfy the majority of developers who need to provide component specifications to upstream designers when using components, we are currently working on the NutUI design specification, and the Resource pack will be available on our website soon

The questionnaire survey

In order to provide you with better service, I hope you can spare a few minutes to tell us your feelings and suggestions, we will be strictly confidential to your answer information. This survey is a prize-winning survey, and users who complete the questionnaire can choose peripheral gifts of JD Joy.

Questionnaire link: get.jd.com/#/survey/in…

link

  • Warehouse address: github.com/jdf2e/nutui
  • Website address: nutui.jd.com/3x/#/
  • Join us at nutui.jd.com/#/joinus
  • Feedback us: github.com/jdf2e/nutui…