管理系统界面开发

如果你需要在我们提供的管理系统前端源码基础上开发自己的页面，可以在 https://github.com/tjbrains/CloudAdminFront 获得管理系统前端源码。

项目初始化

使用以下命令初始化项目：

npm install

开发

主要技术栈

前端技术栈主要有：

• vue3
• primevue
• tailwindcss
• PostCSS

目录结构

所有门户资源均在 src/ 目录下：

assets/      - 静态资源
components/  - 组件
configs/     - 配置
langs/       - 多语言
layouts/     - 布局组件
lib/         - 公共库
router/      - 路由设置
utils/       - 当前项目公用库
views/       - 页面文件

实时开发测试

使用以下命令启用测试所需的服务：

npm run dev

会出现类似于以下的提示：

 VITE v5.3.5  ready in 130 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

然后通过管理系统下的命令设置前端开发地址：

cloud-admin devfront --url=http://localhost:5173/

其中 http://localhost:5173/ 换成你实际启动的 npm 服务地址，前提是要保证管理系统可以直接访问npm启动的服务。

命令执行成功后，就可以直接通过管理系统直接访问你的前端页面了。

要想取消实时开发测试模式，直接重启 cloud-admin 进程即可：

cloud-admin restart

编译

使用以下命令编译项目：

npm run build

编译后的所有资源在项目根目录下的 dist/ 目录中，如果此目录不存在，请先创建再编译项目。

部署

将编译后的 dist/ 下的文件拷贝到 cloud-admin/web/views/@default/ 目录下：

web/
  views/
    @default/
      admins/
      clusters/
      dashboard/
      db/
      ...
      layout.html

然后重启 cloud-admin 进程：

cloud-admin restart

然后即可访问。