### 特性 1. 50+ 高质量组件 2. 40+ 京东移动端项目正在使用 3. 基于京东APP 7.0 视觉规范 4. 支持按需加载 5. 详尽的文档和示例 6. 支持定制主题 7. 支持多语言（国际化） 8. 支持 TypeScript 9. 支持服务端渲染（Vue SSR） 10. 单元测试加持 11. 配套有基于Webpack的构建工具，可快速创建已内置本组件库的Vue工程 12. NutUI 的样式是基于 SCSS 开发的。 ### 扫码体验 ![扫码体验](/uploads/20200816/0172c31a82ccc2ac952de335de668ffe.png) ### 支持环境 1. Android 4.0+ 2. iOS 8.0+ 3. 支持服务端渲染 ### 安装 ```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 ``` 或者 ```html ``` >CDN 引入示例 ```html

Button

``` >CDN 按需加载引入示例 ```html

cdn按需加载

``` **在页面中直接引入**，将无法使用主题定制等功能。我们推荐使用 NPM 或 YARN 方式安装，不推荐在页面中直接引入的用法 ### 通过Vue CLI图形化界面安装如果你的项目是使用 [Vue CLI](https://cli.vuejs.org/zh/) 脚手架搭建，那么你还可以通过 Vue CLI 提供的图形化界面安装 NutUI ：在图形化界面的依赖界面，点击右上角安装依赖按钮，搜索 @nutui/nutui 安装即可。 >加载示例 ```js import Vue from 'vue'; import NutUI from '@nutui/nutui'; import '@nutui/nutui/dist/nutui.css'; NutUI.install(Vue); ``` ### 按需加载 #### 以下两种方式都可以实现只加载用到的组件，从而减少加载的文件体积。 1. 使用 webpack 插件 [@nutui/babel-plugin-separate-import (推荐)](https://www.npmjs.com/package/@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](https://github.com/jdf2e/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 ``` 2.组件 css 单位使用的是 px，如果你的项目中需要 rem 单位，可借助一些工具进行转换，比如 [webpack](https://www.webpackjs.com/) 的 [px2rem-loader](https://www.npmjs.com/package/px2rem-loader)、[postcss](https://github.com/postcss/postcss) 的 [postcss-plugin-px2rem](https://www.npmjs.com/package/postcss-plugin-px2rem) 插件等 VueCLI3 配置示例 vue.config.js ```js const pxtorem = require('postcss-pxtorem'); module.exports = { css: { loaderOptions: { postcss: { plugins: [ pxtorem({ rootValue: 37.5, propList: ['*'] }) ] } } } } ```