集成到项目

在设计器中完成页面开发后，需要集成到项目中完成最后的开发。

集成方案

注意

当前为临时集成方案，较为繁琐，如果需要集成到项目可以联系低码开发团队协助完成。

后续会推出脚手架模块式集成方案。

在"package.json" 里引入低码渲染器 5.0以上均可

javascript

"@szkingdom.koca/lowcode-engine": "5.0.1-20",

"@szkingdom.koca/lowcode-engine": "5.0.1-20",

在设计中将整个通用业务导入（参考元数据导入导出-通用业务整体导入导出），将文件解压后放在项目public/lcp_common目录下

将lowcode渲染包，放在src/lowcode目录下，在main.js中进行注册。lowcode包下载地址：点我下载

javascript

import { initLowcode } from '/@/lowcode';

// koca-template风格示例
async function start() {
  const app = createApp(App);
  ...
  await bootstrap({ app }, async () => {
    initLowcode(app);
  })
}
start();

import { initLowcode } from '/@/lowcode';

// koca-template风格示例
async function start() {
  const app = createApp(App);
  ...
  await bootstrap({ app }, async () => {
    initLowcode(app);
  })
}
start();

在 ".env.development" 文件里配置元数据文件转发注意⚠️：以下端口"3100"根据你启动的程序的端口而变，同理：项目上线时，视项目容器配置情况，看是否需要配置nginx等做静态资源的访问。
javascript
```
 ["/api/lcp-common","http://localhost:3100/lcp-common"]
```
```
 ["/api/lcp-common","http://localhost:3100/lcp-common"]
```
在index.html "head" 里引入低码通用业务包的映射关系文件, 位于引用的主程"main.js" 文件之前
javascript
```
<script type="module" src="/lcp-common/index.js"></script>
```
```
<script type="module" src="/lcp-common/index.js"></script>
```

在项目路由中添加一条低码渲染器路由。

javascript

  {
    path: "/renderer",
    name: "renderer",
    component: LAYOUT,
    meta: {
      title: "低码渲染器",
      menuId: "101",
      icon: "kui-icon-tools",
      hideTab: true,
    },
    children: [
      {
        path: "index",
        name: "rendererIndex",
        component: () => import("@/projects/renderer/index.vue"),
        meta: {
          title: "低码渲染器",
          menuId: "101",
          icon: "kui-icon-tools",
          hideTab: true,
        },
      },
    ],
  },

  {
    path: "/renderer",
    name: "renderer",
    component: LAYOUT,
    meta: {
      title: "低码渲染器",
      menuId: "101",
      icon: "kui-icon-tools",
      hideTab: true,
    },
    children: [
      {
        path: "index",
        name: "rendererIndex",
        component: () => import("@/projects/renderer/index.vue"),
        meta: {
          title: "低码渲染器",
          menuId: "101",
          icon: "kui-icon-tools",
          hideTab: true,
        },
      },
    ],
  },

新建 "@/projects/renderer/index.vue"; 内容如下：代码组织形式试目标项目而定，主要内容就是引入低码

javascript

  <template>
      <Renderer /> //低码组件
  </template>

  <script lang="ts">
  import { Component, Vue } from "vue-facing-decorator";
  import Renderer from "@/lowcode/entry";  //引入通用页面低码组件
  @Component({
    name: "LowcodeRenderer",
    components: { Renderer },
  })
  export default class LowcodeRenderer extends Vue {}
  </script>

  <template>
      <Renderer /> //低码组件
  </template>

  <script lang="ts">
  import { Component, Vue } from "vue-facing-decorator";
  import Renderer from "@/lowcode/entry";  //引入通用页面低码组件
  @Component({
    name: "LowcodeRenderer",
    components: { Renderer },
  })
  export default class LowcodeRenderer extends Vue {}
  </script>

菜单挂载：手动为页面进行菜单挂载。
地址例如：/renderer/index?code=common_qry-CommonInfo-AccountManage-Settgroup "code"来源如下：最后，在项目中的渲染效果如下：

集成到项目 ​

集成方案 ​

集成到项目

集成方案