@superying/remote-ui

Remote-UI

用于 Vue3 项目远程引入本【公司内部 UI 框架】umd 模式资源

使用方法

1. 安装 remote-ui

    npm i --save @superying/remote-ui
   

2. main.ts

   import * as Vue from 'vue'
   import App from './App.vue'
   import { useRemoteUI } from '@superying/remote-ui'
   
   const app = Vue.createApp(App)
   
   await useRemoteUI({ Vue, app })
   
   app.mount('#app')
   

3. 组件使用
   组件全局挂载，业务系统无需手动引入组件，直接使用即可。
   例如：使用 ElButton

   <template>
      <el-button type="primary">remote-ui</el-button>
   </template>
   

4. 内置函数使用
   组件库内置函数已挂载到 app.config.globalProperties，以全局函数的形式使用。
   内置函数包括 $alert, $confirm, $loading, $message, $messageBox, $msgbox, $notify, $prompt。
   例如：使用 $message

   <template>
      <el-button @click="handleClick">remote-ui message</el-button>
   </template>
   <script setup>
      import { getCurrentInstance } from 'vue'
      const _this = getCurrentInstance().appContext.config.globalProperties
   
      const handleClick = () => {
         _this.$message('我是 remote-ui')
      }
   </script>
   

5. 内置指令使用 组件库内置指令已全局注册，可直接使用。
   内置指令包括 InfiniteScroll, loading, popover。 例如：使用 loading

   <template>
      <div v-loading="loading"><div>
   </template>
   <script setup>
      import { ref } from 'vue'
      const loading = ref(true)
   
      setTimeout(() => {
         loading.value = false
      }, 2000)
   </script>
   

温馨提示

• 当前仅支持引入 umd 模式的远程资源
• 启用 top-level-await：
  1.安装 babel 插件 ： @babel/plugin-syntax-top-level-await

  npm i --save-dev @babel/plugin-syntax-top-level-await
  

  2.配置 babel.config.js

  module.exports = {
     plugins: [
        '@babel/plugin-syntax-top-level-await', // top-level-await
     ]
  }
  

  3.配置 vue.config.js

  const { defineConfig } = require('@vue/cli-service')
  module.exports = defineConfig({
     configureWebpack: {
        experiments: {
           topLevelAwait: true // top-level-await
        }
     }
  })
  

TODO

• 支持引入 esm 资源，外部系统使用与 npm module 方式相同。