组件引入

1、按需引入 VUI

框架默认是全局全量引入 VUI 的，如果需要改为按需引入 VUI，可以参考下面配置进行调整。

（1）project.config.json 项目配置中，添加以下配置，把 globalImport 设置为空数组。为了兼容旧的项目配置，如果没有此参数，默认也是全局引入 VUI 的。

{
  "globalImport": []
}

（2）安装 babel-plugin-component

npm i babel-plugin-component -D

在项目根目录下创建 babel.config.js 加入以下代码

module.exports = {
  plugins: [
    [
      "component",
      {
        "libraryName": "@21cnfe/vui",
        "libDir": "dist/lib/components",
      }
    ]
  ]
}

（3）引入组件

• 全局按需引入

在 project.config.json 添加

{
  "globalImport": [],
    "plugins": {
      "OkButton": {
        "path": "@21cnfe/vui",
        "type": "esm"
      }
  }
}

• 页面中按需引入

页面的 index.json 中添加以下配置

{
  "usingComponents": {
    "OkButton": {
      "path": "@21cnfe/vui",
      "type": "esm"
    }
  }
}

即可在页面 index.html 中使用

<div>
    <ok-button type="primary">按钮</ok-button>
</div>

• 把组件挂载到 Vue.prototype 上

app.js 顶部添加以下代码，在 app.js 中可直接访问到 Vue 变量，不需要再另外引入。

import { Dialog } from '@21cnfe/vui'
Vue.prototype.$Dialog = Dialog

2、引入第三方 UI 组件

（1）全局引入

在 project.config.json 添加以下代码引入组件，即可在所有页面中使用该组件。需要先安装相应依赖，如果是 UI 框架，例如 vant，还需要根据对应 UI 框架配置 babel.config.js 。

{
  "globalImport": [],
    "plugins": {
       "Calendar": {
         "path": "vant",
         "type": "esm"
       },
       "vueSwiper": "vue-awesome-swiper"
  }
}

这 2 种插件引入写法分别对应 es6 的

import { Calendar } from 'vant'
import vueSwiper from 'vue-awesome-swiper

按需引入 vant 需要配置的 babel.config.js ，别的 UI 框架也类似，可参考对应 UI框架的官方文档。

module.exports = {
  plugins: [
    ["import", {
      libraryName: "vant",
      libraryDirectory: "es",
      style: true
    }]
  ]
}

（2）页面中引入

在页面的 index.json 中添加，即可在当前页面中使用该组件

{
  "usingComponents": {
    "Calendar": {
      "path": "vant",
      "type": "esm"
    },
    "vueSwiper": "vue-awesome-swiper"
  }
}