以vue-cli 3.0版本生成的单页面项目为例
从官方下载ueditor的压缩包后解压到主应用的public目录下
如下图
安装 vue-ueditor-wrap 插件
npm i vue-ueditor-wrap -D
主应用main.js 中加入这两句
import VueUeditorWrap from 'vue-ueditor-wrap' window.commonComponent = { VueUeditorWrap };
子应用使用时这样写
<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png" /> <HelloWorld msg="Welcome to Your Vue.js App" /> <vue-ueditor-wrap v-model="msg" :config="myConfig" ref="myueditor" @ready="ready"></vue-ueditor-wrap> <div @click="getContent">获取编辑器内容</div> </div> </template> <script> // @ is an alias to /src import HelloWorld from "@/components/HelloWorld.vue"; export default { name: "Home", components: { HelloWorld, VueUeditorWrap: window.__POWERED_BY_QIANKUN__ ? window.commonComponent.VueUeditorWrap : import('vue-ueditor-wrap') }, data(){ return{ msg: '123', myConfig: { // 编辑器不自动被内容撑高 autoHeightEnabled: false, // 初始容器高度 initialFrameHeight: 240, // 初始容器宽度 initialFrameWidth: '100%', // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！部署在国外的服务器，如果无法访问，请自备梯子） serverUrl: 'http://35.201.165.105:8000/controller.php', // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2 // UEDITOR_HOME_URL: process.env.BASE_URL + 'UEditor/' UEDITOR_HOME_URL:'http://localhost:8080/UEditor/' }, editorInstance: null } }, methods:{ ready(editorInstance) { console.log(`编辑器实例${editorInstance.key}: `, editorInstance) this.editorInstance = editorInstance }, getContent() { console.log(this.msg) console.log(this.$refs.myueditor) } } }; </script>
其中有二句配置比较重要
其一：
VueUeditorWrap: window.__POWERED_BY_QIANKUN__ ? window.commonComponent.VueUeditorWrap : import('vue-ueditor-wrap')
这句是注册挂载 VueUeditorWrap组件，如果window下有__POWERED_BY_QIANKUN__ 这个变量，则认为当前是qiankun下的子应用环境，直接使用在主应用下挂载到window的组件 VueUeditorWrap
否则就 import('vue-ueditor-wrap')
UEDITOR_HOME_URL
该变量是指向UEditor的压缩文件。没有其他要求，就是指向一个可以用的资源路径，可以使用本目录中的，也可以使用其他线上的地址。
最终结果
更多用法可以查阅vue-ueditor-wrap该组件
此复用组件的方法 同时也适用于其他组件
更多关于qiankun实践的总结，可以看下这个文章。
10.1结束，明天上班。
拿我格子衫来 认证博客专家 拿我格子衫来 范马勇次郎 琦玉君 积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神明自得，圣心备焉。故不积跬步，无以至千里；不积小流，无以成江海。骐骥一跃，不能十步；驽马十驾，功在不舍。锲而舍之，朽木不折；锲而不舍，金石可镂。蚓无爪牙之利，筋骨之强，上食埃土，下饮黄泉，用心一也。蟹六跪而二螯，非蛇鳝之穴无可寄托者，用心躁也。