NutUI 3.0 按需加载使用方式

[richard1015]

Vite 构建工具 通过 vite-plugin 使用按需加载

Vite 构建工具，使用 vite-plugin-style-import 实现按需引入。

安装插件

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

在 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: {
        additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`
      }
    }
  }
};

WebPack 构建工具 通过 babel 使用按需加载

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

安装插件

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

在 .babelrc 或 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'
    ]
  ]
}

接着像这样在代码中直接引入组件。

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");

[bruceleedrupal]

这样按需加载很多组件还是无法正常渲染,譬如 https://nutui.jd.com/3x/#/imagepreview ,这个图片swiper组件等等，希望能尽快给出完整解决方案