vue 按需引入NutUI

NutUI是一套京东风格的移动端组件库，开发和服务于移动Web界面的企业级产品。

具体的使用方式，可以参考Nut UI说明文档 。

虽说NutUI也有针对vue版本，有不同的引入方式的介绍。但是考虑到还是有好多小伙伴傻傻分不清，这里我们再一起了解一下。

一、vue2版本

安装

cnpm i @nutui/nutui -S

加载示例

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

NutUI.install(Vue);

按需加载

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

安装插件

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

在 .babelrc 中添加配置：

{
	// ...
	"plugins": [
	    "transform-vue-jsx",
	    "transform-runtime",
	    // ...
	    ["@nutui/babel-plugin-separate-import", {
	      "libraryName": "@nutui/nutui",
	      "libraryDirectory": "dist/packages",
	      "style": "scss"
	    }]
	  ],
	// ...
}

VueCLI2 在 /build/utils.js 中添加配置：

exports.cssLoaders = function(options) {

// ...

// generate loader string to be used with extract text plugin
  function generateLoaders(loader, loaderOptions) {
    const loaders = []

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      loaders.push(MiniCssExtractPlugin.loader)
    } else {
      loaders.push('vue-style-loader')
    }

    loaders.push(cssLoader)

    if (options.usePostCSS) {
      loaders.push(postcssLoader)
    }

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
    
	// 添加nutui css变量
    loaders.push({
      loader: 'sass-loader',
      options: {
        data: `@import "@nutui/nutui/dist/styles/index.scss"; `
      }
    })

    return loaders
  }

// ...

}

VueCLI3 在 vue.config.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";
                `,
            }
        },
    }
}

在项目里只引入用到的组件了。样式也无需单独引入。插件会自动将代码转换为方式二的手动引入方式

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

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

二、vue3版本

安装

cnpm i @nutui/nutui@next

加载示例

import { createApp } from "vue";
import App from "./App.vue";


// 注意：这种方式将会导入所有组件
import NutUI from "@nutui/nutui";
import "@nutui/nutui/dist/style.css";
createApp(App).use(NutUI).mount("#app");

按需加载

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

安装插件

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