开发环境搭建

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 #初始密码
  11. log:
  12.     level: debug
  13.     time_zone: Asia/Shanghai
  14.     log_name: 1Panel
  15.     log_suffix: .log
  16.     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 登录