3 Star 9 Fork 2

阿库 / amis-vue-integration

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 1.75 KB
一键复制 编辑 原始数据 按行查看 历史
colys 提交于 2023-02-24 18:28 . import -> require

amis-vue-integration

Vue2项目集成amis渲染器与编辑器,以及使用vue扩展amis组件

因为官方的amis-widget组件在vue2项目打包会重复打包amis,替换成@colys/amis-widget

原因是:

​ amis-widget组件import("amis-edit-core")

​ amis-edit-core 组件require("amis-theme-editor")

​ amis-theme-editor组件因为没有esm,所有是require('amis')

所有导致amis又有import又有require,所以修改了amis-widget的源码内amis-edit-core加载方式为require,打包发npm仓库(@colys/amis-widget)

image-20230219205302479

image-20230219205037949

主要代码:

注册vue组件到amis渲染器:src/widget/registerRenderer.js

amis编辑器自定义组件定义:src/editor/plugins/InfoCardPlugin.js

amis编辑器使用:src/editor/index.vue

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

如果报Remark组件重复的异常: The renderer with name "remark" has already exists, please try another name! 请注释 node_modules/amis-editor/esm/index.js 中所有amis-theme-editor的引用

//require('amis-theme-editor/lib/renderers/Border');
// require('amis-theme-editor/lib/renderers/ColorPicker');
// require('amis-theme-editor/lib/renderers/Font');
// require('amis-theme-editor/lib/renderers/PaddingAndMargin');
// require('amis-theme-editor/lib/renderers/Radius');
// require('amis-theme-editor/lib/renderers/Shadow');
// require('amis-theme-editor/lib/renderers/Size');
// require('amis-theme-editor/lib/renderers.css');

重新npm run dev

JavaScript
1
https://gitee.com/colys/amis-vue-integration.git
git@gitee.com:colys/amis-vue-integration.git
colys
amis-vue-integration
amis-vue-integration
master

搜索帮助

53164aa7 5694891 3bd8fe86 5694891