组件是需要单独依次导入才可以使用的。此外,FlyFish-2.2.0不兼容FlyFishComponents中的组件,需要手动修改FlyFishComponents中组件的资源路径和组件ID为对应的占位符。修改文件包含:editor.html、env.js、index.html、options.json、src/main.js、src/setting.js
FlyFishComponents仓库——标题组件为例
editor.html
<link rel="stylesheet" type="text/css" href="/common/editor.css" />
<script type="text/javascript" src="/components/61b0a25a7f8cf51699105fc7/v-current/env.js"></script>
<script type="text/javascript" src="/common/data-vi.js"></script>
<script type="text/javascript" src="/common/editor.js"></script>
// 修改为
<link rel="stylesheet" type="text/css" href="${EditorCssTpl}" />
<script type="text/javascript" src="${EditorEnvTpl}"></script>
<script type="text/javascript" src="${EditorDataViTpl}"></script>
<script type="text/javascript" src="${EditorJsTpl}"></script>
env.js
componentsDir: 'components',
// 修改为
componentsDir: "${EnvComponentDirTpl}"
index.html
<script type="text/javascript" src="/components/61b0a25a7f8cf51699105fc7/v-current/env.js"></script>
<script type="text/javascript" src="/common/data-vi.js"></script>
// 修改为
<script type="text/javascript" src="${IndexEnvTpl}"></script>
<script type="text/javascript" src="${IndexDataViTpl}"></script>
options.json
"type": "61b0a25a7f8cf51699105fc7",
// 修改为
"type": "${ComponentIdTpl}",
src/main.js
registerComponent('61b0a25a7f8cf51699105fc7', 'v-current', Component);
// 修改为
registerComponent('${ComponentIdTpl}', 'v-current', Component);
src/setting.js
registerComponentOptionsSetting('61b0a25a7f8cf51699105fc7', 'v-current', OptionsSetting);
registerComponentDataSetting('61b0a25a7f8cf51699105fc7', 'v-current', DataSetting);
// 修改为
registerComponentOptionsSetting('${ComponentIdTpl}', 'v-current', OptionsSetting);
registerComponentDataSetting('${ComponentIdTpl}', 'v-current', DataSetting);
操作步骤:
替换文件 —— 压缩组件 —— 导入FlyFish —— 安装依赖 —— 编译组件(Ctrl+S)—— 更新上线
需要注意,Windows下Zip包是不可用的,需要Mac Zip 或者Linux Zip才可以。