@nutui/separate-importdeprecated

separate-import

Usage no npm install needed!

<script type="module">
  import nutuiSeparateImport from 'https://cdn.skypack.dev/@nutui/separate-import';
</script>

README

@nutui/separate-import


按需引入Nutui2.0组件,减小打包体积;

安装


npm i -D @nutui/separate-import

使用


配置.babelrc文件:

{
  "plugins": [
    ["@nutui/separate-import", {
        "libraryName": "@nutui/nutui",
        "libraryDirectory": "dist/src/packages",
        "style": "css"
    }]
  ]
}

然后就可以像下面这样按需引入组件了:

import Vue from 'vue';
import { Button, Icon } from '@nutui/nutui';

Vue.use(Button);
Vue.use(Icon);

AST转换


import { Button } from '@nutui/nutui';

当使用这种方式import组件时,将会被转换为:

import Button from '@nutui/nutui/dist/src/packages/button/button.js';
import '@nutui/nutui/dist/src/packages/button/button.css';
  • 如果style选项为css,则会加载相应组件的css

  • 如果style选项为scss,则会加载相应组件的scss

  • 如果没有style选项,则不会加载样式文件,需用户手动添加;