A Jingdong style lightweight mobile Vue component library

This issue recommends a Jingdong style lightweight mobile Vue component library – NutUI.

NutUI is a set of vite based Jingdong style mobile terminal component library, which is open source by the front-end development department of Jingdong User Experience Design Department (JDC), mainly used for enterprise-level front, middle and background products of mobile Web interface, currently supporting Android 5.0+ and iOS 9.2+ and above versions.

NutUI features:

70+ high quality components (3.0 under continuous development)
Based on Jingdong APP 10.0 visual specifications
Support for on-demand referencing
Extensive documentation and examples
TypeScript support
Support for server-side rendering (testing phase)
Support for custom themes
Unit test coverage (3.0 in development)

Get started quickly:

NPM installation

# Vue2 Project needs reference 2.x document https://nutui.jd.com/2xnpm i @nutui/nutui# Vue3 project npm i @nutui/nutui@next# taro 小程序项目npm i @nutui/nutui-taro

Examples of NPM usage

Note: This method will import all components and the package file size will be large, we recommend using on-demand loading

import { createApp } from "vue";import App from "./App.vue";// Note: This method will import all components import NutUI from "@nutui/nutui";import "@nutui/nutui/dist/style.css";createApp(App).use(NutUI).mount("#app");

The vite build tool is loaded on-demand using the vite-plugin

Because vite itself already imports the component library on demand, styles-only is not imported on demand, so you only need to import styles on demand. The vite build tool uses vite-plugin-style-import to implement on-demand import.

npm install vite-plugin-style-import --save-dev

Add configuration in vite.config：

import vue from '@vitejs/plugin-vue'import styleImport from 'vite-plugin-style-import';export default {  plugins: [    vue(),    styleImport({      libs: [        {          libraryName: '@nutui/nutui',          libraryNameChangeCase: 'pascalCase',          resolveStyle: (name) => {            return `@nutui/nutui/dist/packages/${name}/index.scss`          }        }      ],    }),  ],  css: {    preprocessorOptions: {      scss: {        // 配置 nutui 全局 scss 变量        additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`      }    }  }};

The WebPack build tool is loaded on-demand using babel

Babel-plugin-import is a babel plugin that automatically converts import statements into on-demand imports during compilation.

npm install babel-plugin-import --save-dev

Add configuration in.babelrc or babel.config.js:

{  // ...  plugins: [    [      "import",      {        "libraryName": "@nutui/nutui",        "libraryDirectory": "dist/packages/_es",        "camel2DashComponentName": false      },      'nutui3-vue'    ],    [      "import",      {        "libraryName": "@nutui/nutui-taro",        "libraryDirectory": "dist/packages/_es",        "camel2DashComponentName": false      },      'nutui3-taro'    ]  ]}

Then introduce the component directly into the code like this

import { createApp } from "vue";import App from "./App.vue";import { Button, Icon } from "@nutui/nutui";import "@nutui/nutui/dist/style.css";createApp(App).use(Button).use(Icon).mount("#app");

Component style:

• Button Button

• Swipe

• Collapse

• Drag

• Popup

• Steps

• Progress

• FixedNav

• Pagination

• NumberKeyboard

• Address

• signature

You can read more on your own.