开发环境搭建

1 项目结构

  1. .
  2. ├── backend # 后端项目主目录
  3. ├── build # 编译目录
  4. ├── cmd # 后端启动目录
  5. └── frontend # 前端项目主目录

2 配置开发环境

2.1 环境准备

后端

1Panel 后端使用了 Golang 语言的 Gin 框架,并使用 go.mod 作为项目管理工具。开发者需要先在开发环境中安装 go 1.18 或者以上版本

前端

1Panel 前端使用了 Vue.js 作为前端框架,Element-Plus 作为 UI 框架,并使用 npm 作为包管理工具。开发者请先下载 Node.js 作为运行环境,IDEA 用户建议安装 Vue.js 插件,便于开发。

安装 npm

进入网站, 选择相应的安装包进行安装即可。

2.2 初始化配置

配置文件

1Panel 会默认加载该路径下的配置文件 /opt/1panel/conf/app.yaml,请参考下面配置创建对应目录及配置文件

  1. system:
  2. db_file: 1Panel.db
  3. base_dir: /opt
  4. mode: dev
  5. repo_url: https://resource.fit2cloud.com/1panel/package
  6. is_demo: false
  7. port: 9999
  8. username: admin #初始用户名
  9. password: admin123 #初始密码
  10. log:
  11. level: debug
  12. time_zone: Asia/Shanghai
  13. log_name: 1Panel
  14. log_suffix: .log
  15. max_backup: 10

3 代码运行

3.1 运行后端服务

新建一个 git 项目 输入主工程 git 地址: git@github.com:1Panel-dev/1Panel.git

img.png

3.2 新建 Go build 启动项

img.png

3.3 运行后端

  • 需要先进入工程目录下的子目录 frontend, 执行 npm run build:dev 打包前端资源

img.png

3.4 运行前端

  • 进入工程目录下的子目录 frontend, 用 npm i 安装前端依赖包
  • 安装完成后,使用 npm run dev 命名启动前端,前端启动后即可通过 http://localhost:4004/ 地址访问
  • 使用默认用户名 admin 默认密码 admin123 登录