NutUI, a Vue component library for mobile, has received a lot of attention since its release. According to incomplete statistics, at least 30 jd Web projects are currently using NutUI.

After a long period of intense development, we recently released version 2.0 of NutUI. NutUI 2.0 is positioned as a jd style boutique mobile component library, not a simple update to NutUI 1.x.

(Scan/hold down to identify the QR code to experience NutUI 2.0 component examples)

NutUI’s official website has been updated at the same time. Please visit https://nutui.jd.com (PC).

Let’s take a look at some of the important new features in NutUI 2.0.

NutUI 2.0 components were developed with jingdong APP 7.0 visual specifications in mind, unifying the visual style and dynamic effects.

If the style is different from what you want, you can adjust it by adding a custom class. If the difference is large, you can even replace the default style file for the entire component. Your components, you call the shots.

NutUI 2.0 supports custom component library overall theme styles. Component peels can be easily implemented by resetting the values of some style variables in a project.

NutUI 1.x is loaded on demand through a custom build, which is fine, but it’s inconvenient to have users install dependencies in the NutUI project directory each time they go to node_modules. In version 2.0, we redesigned the on-demand functionality.

When using NutUI 2.0 components, we don’t have to import the complete component library. We can just import the component files and their corresponding style files into the project. Such as:


     
    
      
    import Button from '@nutui/nutui/dist/packages/button/button.js'
    
      
    import Switch from '@nutui/nutui/dist/packages/switch/switch.js'
    
      
    
      
    import '@nutui/nutui/dist/packages/button/button.css'
    
      
    import '@nutui/nutui/dist/packages/Switch/switch.css'
    
     
Copy the code

There is no need for custom builds, which is much more convenient than NutUI 1.x. If this isn’t convenient or elegant enough for you, it’s ok. We also support ES6module style on-demand writing with the webPack plugin @nutui/babel-plugin-separate-import. Compatible with browsers that do not support ES6module syntax:

import { Button, Icon } from '@nutui/nutui';Copy the code

Also trouble installing plug-ins? Try one of our Vue project build tools, Gaea-CLI, which generates a Vue template project with the plugin built in, and you can develop your project directly based on it. In addition, this build tool has many advanced features, as well as specific optimization for our factory development environment, the previous series of versions have been verified by dozens of projects, we recommend you to use.

NutUI 2.0 begins to support multiple languages. The component uses Chinese by default and can be loaded with other language packages to achieve multi-language switching. NutUI 2.0 is fully compatible with vuE-i18n. NutUI 2.0 is fully compatible with vuE-i18N. NutUI 2.0 is compatible with VuE-i18N. NutUI 2.0 is compatible with VUE-i18N.

We believe that the best practice for mobile component library icon scheme is SVG scheme, because SVG ICONS are more flexible than font ICONS, easier to load on demand, and will not cause some browsers to anti-aliasing them, high definition, combined with the Symbol element can also achieve SVG ICONS reuse. SVG ICONS also work well on mobile. We chose SVG as the icon scheme for the component library back in NutUI 1.x, and this choice has been carried forward in NutUI 2.0.

NutUI 2.0 also has Typescript support, SUPPORT for SSR server rendering, and more.

NutUI 2.0 is based on a new architecture, not a 1.0 architecture upgrade. We combined the 1.0 architecture experience, 2.0 functional requirements, new changes in tools, our factory development environment, mainstream excellent component library implementation scheme and other factors, to create a new 2.0 architecture. The architecture has the following features:

  • Developed based on Webpack4.0, it has a faster build speed and outputs smaller bundles

  • Build multiple types of bundles at once, compatible with various mainstream modular and non-modular reference scenarios

  • Intelligent loading of Polyfill is realized based on Babel7, which is compatible with lower versions of browsers without additional introduction of babel-Polyfill files

  • Integrating the Carefree solution greatly improves the efficiency of real machine debugging in our development environment

  • Markdown format documents are easy to write and Github to read, based on MD files automatically generated documentation site

  • Sample page PWA support, support for offline caching and creation of home screen ICONS

  • Access to persistent integration and automated testing to improve code reliability

  • Support automatic generation of new component templates

  • A WebPack plug-in and a Vue template engineering build tool (Gaea 4.0)

  • …

A component library is a stage where the main actor is not the functionality and architecture of the component library, but the components. We spent a lot of time in component development, carefully selecting and polishing a number of components. NutUI 2.0 phase has more than 30 components, covering six categories of “basic”, “layout”, “data entry”, “operational feedback”, “data display” and “navigation”.

Next, we will focus on adding new components, as well as polishing and maintaining existing components. You can also give us feedback on any common component requirements.

NutUI 2.0 also has a major feature — it supports the conversion of Vue components into wechat small program components, thus realizing the cross-platform use of coding once. At present, this function is still under intensive development, and it will be online later. Please look forward to it.

Welcome interested partners to participate in the development of NutUI project, we suggest to participate in the way of pulling request. If you want to fix a bug, submit a pull Request to the Master branch; If you are proposing a pull request for a new feature or component, please use the V2 branch and we will merge your Code after Code Review.

NutUI 2.0 component library does not bury any Easter eggs, you feel free to use it

  • Website:

    https://nutui.jd.com (PC)

  • Making the warehouse:

    https://github.com/jdf2e/nutui/ (welcome Star ~)

  • Update log:

    https://github.com/jdf2e/nutui/releases

  • Feedback suggestions:

    https://github.com/jdf2e/nutui/issues

  • NutUI load plugins on demand:

    https://www.npmjs.com/package/@nutui/babel-plugin-separate-import

  • Vue template engineering construction tools:

    https://www.npmjs.com/package/gaea-cli

  • The H5 real test tool that doesn’t depend on wifi hotspots is Carefree:

    https://carefree.jd.com/

  • Contact us:

    [email protected]