1.     **本教程主要目的是将未遵循本项目开发约束的界面集成到整体页面中，这意味着你需要自行处理与你自己后端的交互。**

一、环境准备

1.1 下载源代码

  1. git clone https://github.com/kubesys/kube-frontend

1.2 安装后端服务（可选）

  1.    如果没有Kubernetes环境，参照[脚本安装](https://github.com/kubesys/installer)，
  1. kubeinst init-env
  2. kubeinst init-kube
  3. kubeinst init-backend
  4. kubeinst init-frontend

1.3 修改baseURL

  1.   修改public/config.js的baseURL，<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/99567/1631067542859-9ab399b3-5c64-46aa-beb3-9281537028de.png#clientId=ue2faf505-2d43-4&from=paste&height=232&id=u3f98e0e9&margin=%5Bobject%20Object%5D&name=image.png&originHeight=463&originWidth=1287&originalType=binary&ratio=1&size=46082&status=done&style=none&taskId=udda24bf1-1737-42c5-88c9-97f94f6399b&width=643.5)

1.4 运行程序

  1.     请确认已安装nodejs
  1. npm install
  2. npm run dev

二、在src/views下面开发自己的页面

2.1 开发页面

  1.     假设新开发一个页面apps/index.vue

image.png

2.2 集成界面

  1.         如果需要添加到主体框架，则执行以下命令
  1. kubectl edit frontend routes-1001-admin
  1.       然后修改
  1. - component: /app/index (即src/views/app/index.vue中/app/index)
  2.   name: 界面侧栏看到的名字
  3.   path: 查看语法 https://www.yuque.com/kubesys/kube-frontend/qz0cuq

image.png

2.3 查看效果

image.png