# amis-vue-integration

**Repository Path**: colys/amis-vue-integration

## Basic Information

- **Project Name**: amis-vue-integration
- **Description**: Vue2项目集成amis渲染器与编辑器，以及使用vue扩展amis组件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 11
- **Forks**: 2
- **Created**: 2023-02-19
- **Last Updated**: 2025-02-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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](./screenshoot/image-20230219205302479.png)

![image-20230219205037949](./screenshoot/image-20230219205037949.png)

主要代码：

    注册vue组件到amis渲染器：src/widget/registerRenderer.js
    
    amis编辑器自定义组件定义：src/editor/plugins/InfoCardPlugin.js
    
    amis编辑器使用：src/editor/index.vue

## Build Setup

``` bash
# 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的引用
``` javascript
//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