Name: NutUI
Author: 羊先生

快速了解

完整资料

资料已展开

关于 NutUI

特性

50+ 高质量组件
40+ 京东移动端项目正在使用
基于京东APP 7.0 视觉规范
支持按需加载
详尽的文档和示例
支持定制主题
支持多语言（国际化）
支持 TypeScript
支持服务端渲染（Vue SSR）
单元测试加持
配套有基于Webpack的构建工具，可快速创建已内置本组件库的Vue工程
NutUI 的样式是基于 SCSS 开发的。

扫码体验

支持环境

Android 4.0+
iOS 8.0+
支持服务端渲染

安装

js 复制代码

npm i @nutui/nutui -S
or
yarn add @nutui/nutui

如果你的网络环境不佳，不妨试试国内的npm镜像,默认安装最新版，如需使用 1.x 版本，请指定版本号，如： npm i @nutui/nutui@1.3.2 -S

页面直接引用

在页面中使用 script 和 link 标签直接引入文件，NutUI 将会自动注册。我们在 npm 发布包内的 dist 目录下提供了 nutui.js nutui.css 以及 nutui.min.js nutui.min.css。

当然你也可以通过 CDN 的方式引入，可以在 jsdelivr 和 unpkg 等公共 CDN 上获取到 NutUI。我们推荐链接到一个你可以手动更新的指定版本号

html 复制代码

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.8/dist/nutui.css">
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.8/dist/nutui.js"></script>

或者

html 复制代码

<!-- 生产环境版本，优化了尺寸和速度 -->
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.8/dist/nutui.min.css">
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.8/dist/nutui.min.js"></script>

CDN 引入示例

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.8/dist/nutui.min.css">
</head>
<body>
    <div id="app">
        <nut-button @click="showDialog">
            Button
        </nut-button>
    </div>

    <!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <!-- 引入NutUI组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.8/dist/nutui.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            methods: {
                showDialog() {
                    this.$dialog({
                        title: "确定删除此订单？",
                        content: "删除后将从你的记录里消失，无法找回"
                    });
                }
            }
        });
    </script>
</body>
</html>

CDN 按需加载引入示例

html 复制代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>

  <body>
    <div id="app">
      <nut-button>cdn按需加载</nut-button>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.8/dist/packages/button/button.css"
    />
    <!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.8/dist/packages/button/button.js"></script>
    <script>
      Vue.component(button.default.name, button.default);
      new Vue({
        el: "#app"
      });
    </script>
  </body>
</html>

在页面中直接引入，将无法使用主题定制等功能。我们推荐使用 NPM 或 YARN 方式安装，不推荐在页面中直接引入的用法

通过Vue CLI图形化界面安装

如果你的项目是使用 Vue CLI 脚手架搭建，那么你还可以通过 Vue CLI 提供的图形化界面安装 NutUI ：在图形化界面的依赖界面，点击右上角安装依赖按钮，搜索 @nutui/nutui 安装即可。

加载示例

js 复制代码

import Vue from 'vue';
import NutUI from '@nutui/nutui';
import '@nutui/nutui/dist/nutui.css';

NutUI.install(Vue);

按需加载

以下两种方式都可以实现只加载用到的组件，从而减少加载的文件体积。

使用 webpack 插件 @nutui/babel-plugin-separate-import (推荐)
首先安装 @nutui/babel-plugin-separate-import 插件

js 复制代码

npm i @nutui/babel-plugin-separate-import -D

然后配置一下babel的配置文件

js 复制代码

{
  "plugins": [
    ["@nutui/babel-plugin-separate-import", {
        "style": "scss"
    }]
  ]
}

style 选项值为 "css" 时加载组件对应的css文件，为 "scss" 时加载对应的scss文件。无style选项时，不自动加载样式文件。

接下来，我们就可以在项目里只引入用到的组件了。默认情况下，样式也无需单独引入。插件会自动将代码转换为方式二的手动引入方式。

js 复制代码

import Vue from 'vue';
import { Dialog,Picker } from '@nutui/nutui';

Dialog.install(Vue);
Picker.install(Vue);

如果需要按需加载 scss 文件（如需要自定义主题）时，除了需要把 style 选项值设为 scss 外，还需要修改 webpack 配置文件的 sass-loader 配置，如下所示：

js 复制代码

{
    loader: 'sass-loader',
    options: {
        data: `@import "@nutui/nutui/dist/styles/index.scss"; `
    }
}

vue.config.js VueCLI3 配置方式

js 复制代码

module.exports = {
    css: {
        loaderOptions: {
            // 给 sass-loader 传递选项
            scss: {
                // @/ 是 src/ 的别名
                // 注意：在 sass-loader v7 中，这个选项名是 "data"
                prependData: ` 
                @import "@/assets/custom_theme.scss";
                @import "@nutui/nutui/dist/styles/index.scss";
                `,
            }
        },
    }
}

VueCLI 3 相关Demo 请查看 NutUI Demo

手动引入

js 复制代码

import Vue from 'vue';
import Button from '@nutui/nutui/dist/packages/button/button.js';  // 加载构建后的JS
import '@nutui/nutui/dist/packages/button/button.css';  //加载构建后的CSS
//主题定制等场景需要加载SCSS,而不是构建后的CSS
//import '@nutui/nutui/dist/packages/button/button.scss'; 

Button.install(Vue);

组件使用

1.使用:prop传递数据格式为数字、布尔值或函数时，必须带:(兼容字符串类型除外)，比如：

js 复制代码

<nut-switch :active="true" size="base"></nut-switch>

2.组件 css 单位使用的是 px，如果你的项目中需要 rem 单位，可借助一些工具进行转换，比如 webpack 的 px2rem-loader、postcss 的 postcss-plugin-px2rem 插件等

VueCLI3 配置示例 vue.config.js

js 复制代码

const pxtorem = require('postcss-pxtorem');
module.exports = {
    css: {
        loaderOptions: {
          postcss: {
            plugins: [
              pxtorem({
                rootValue: 37.5,
                propList: ['*']
              })
            ]
          }
        }
      }
}

适合的使用方向

特性

NutUI是一套京东风格的移动端组件库，开发和服务于移动Web界面的企业级产品，40+ 京东移动端项目正在使用，配套有基于Webpack的构建工具，可快速创建已内置本组件库的Vue工程

扫码体验

支持环境

收录线索

uivue-ui移动端UIAPI / 云服务

资料说明

内容根据公开资料整理；版本、兼容性与服务状态请以官网最新说明为准。