京东出品的框架，进大厂就指望它了

大家好,我是前端实验室的大师兄！

京东作为国内最为优秀的电商平台之一，其内部自研的组件库项目也是非常优秀的

今天大师兄就给大家介绍一下东哥最新的一款组件库NutUI

NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，开发和服务于移动 Web 界面的企业级产品。

NutUI 的全新版本升级

NutUI 更新了版本，还特意做了全新的官网，主色调从原来的蓝色变成了红色，这也意味着，不仅升级到了如今火热的 Vue 3.x，整套 UI 视觉也进行了全新设计

NutUI 3 组件丰富，可以满足移动端商城业务的大多数场景的需求，相比有赞的 vant UI，NutUI 更轻量，对于快速搭建移动商城会更友好。

值得关注的是 NutUI 3.0 支持了最新的 Vue 3.x

快速上手

代码语言：javascript复制

# Vue2 项目 需要参考 2.x 文档 https://nutui.jd.com/2x
npm i @nutui/nutui@2

# Vue3 项目
npm i @nutui/nutui

Vite 构建工具

如果你是用 Vite 构建工具，可以通过 vite-plugin 使用按需加载安装插件

代码语言：javascript复制

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

在 vite.config 中添加配置：

代码语言：javascript复制

import vue from '@vitejs/plugin-vue'
import { createStyleImportPlugin, NutuiResolve } from 'vite-plugin-style-import'
export default {
  plugins: [
    vue(),
    createStyleImportPlugin({
      resolves: [
        NutuiResolve(),
      ]
    }),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        // 配置 nutui 全局 scss 变量
        additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`
      }
    }
  }
};

WebPack 构建工具

如果你是用WebPack 构建工具，可以通过 babel 使用按需加载

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 语句自动转换为按需引入的方式

安装插件

代码语言：javascript复制

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

在 .babelrc 或 babel.config.js 中添加配置：

代码语言：javascript复制

{
  // ...
  plugins: [
    [
      "import",
      {
        "libraryName": "@nutui/nutui",
        "libraryDirectory": "dist/packages/_es",
        "style": (name, file) => name.toLowerCase().replace('_es/', '')   '/index.scss',
        "camel2DashComponentName": false
      },
      'nutui3-vue'
    ],
    [
      "import",
      {
        "libraryName": "@nutui/nutui-taro",
        "libraryDirectory": "dist/packages/_es",
        "style": (name, file) => name.toLowerCase().replace('_es/', '')   '/index.scss',
        "camel2DashComponentName": false
      },
      'nutui3-taro'
    ]
  ]
}

如果您想进入京东工作，在简历上面写着熟悉NutUI框架，有过项目经验,说不定东哥立马就让你入职了呢

官网地址：https://nutui.jd.com/#/ giHub地址：https://github.com/jdf2e/nutui

写在最后

欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~

进群方式：在下方公众号后台，回复 111 ，按提示操作即可进群。

babel.js vue.js https webpack 网络安全

0 人点赞