代码拉取完成,页面将自动刷新
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)
主要代码:
注册vue组件到amis渲染器:src/widget/registerRenderer.js
amis编辑器自定义组件定义:src/editor/plugins/InfoCardPlugin.js
amis编辑器使用:src/editor/index.vue
# 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
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。