10分钟上手gin-vue-admin：从0到1的安装部署指南

你还在为前后端分离项目的基础架构搭建烦恼吗？还在重复编写认证、权限、路由等基础代码吗？本文将带你10分钟内完成gin-vue-admin开发平台的搭建，让你专注于业务逻辑开发，轻松应对企业级应用需求。

读完本文你将获得：

• 掌握gin-vue-admin的环境准备与安装步骤
• 了解前后端项目的启动与配置方法
• 学会使用Swagger API文档与VSCode开发环境
• 解决常见安装问题的实用技巧

项目简介

gin-vue-admin是一个基于Vite+Vue3+Gin的全栈开发基础平台，支持TS和JS混用。它集成了JWT鉴权、权限管理、动态路由、代码生成器等开发必备功能，帮助开发者快速构建企业级应用。

官方文档：README.md

环境准备

在开始安装前，请确保你的开发环境满足以下要求：

- node版本 > v18.16.0
- golang版本 >= v1.22
- IDE推荐：Goland 或 VSCode

安装步骤

1. 克隆项目

首先，通过以下命令克隆项目到本地：

git clone https://gitcode.com/flipped-aurora/gin-vue-admin.git
cd gin-vue-admin

2. 后端服务 (server) 安装

使用Goland等编辑工具打开server目录（注意：不可以直接打开gin-vue-admin根目录）：

# 进入server文件夹
cd server

# 使用go mod并安装依赖包
go generate

# 运行后端服务
go run . 

核心配置文件：server/config.yaml

3. 前端项目 (web) 安装

打开新的终端，进入web目录并安装依赖：

# 进入web文件夹
cd web

# 安装依赖
npm install

# 启动前端项目
npm run serve

前端入口文件：web/src/main.js

开发环境配置

Swagger API文档

项目集成了Swagger自动化API文档，使用方法如下：

# 安装swagger
go install github.com/swaggo/swag/cmd/swag@latest

# 生成API文档
cd server
swag init

执行成功后，启动服务并访问 http://localhost:8888/swagger/index.html 即可查看API文档。

文档配置：server/docs/swagger.yaml

VSCode工作区

项目提供了VSCode工作区配置，方便开发者快速搭建开发环境：

1. 使用VSCode打开根目录下的 gin-vue-admin.code-workspace
2. 在运行和调试中选择相应的task：
   • Backend: 启动后端服务
   • Frontend: 启动前端服务
   • Both (Backend & Frontend): 同时启动前后端

目录结构

了解项目结构有助于更好地进行开发：

gin-vue-admin/
├── server/           # 后端项目
│   ├── api/          # API接口层
│   ├── config/       # 配置包
│   ├── core/         # 核心文件
│   ├── model/        # 数据模型层
│   └── router/       # 路由配置
└── web/              # 前端项目
    ├── src/          # 源代码
    │   ├── api/      # API请求
    │   ├── components/ # 组件
    │   ├── router/   # 路由
    │   └── view/     # 页面视图
    └── package.json  # 依赖配置

常见问题解决

1. 依赖安装失败

如果遇到npm install失败，可以尝试：

# 清除npm缓存
npm cache clean --force

# 使用淘宝镜像
npm install --registry=https://registry.npm.taobao.org

2. 数据库连接问题

请检查server/config.yaml中的数据库配置，确保数据库服务已启动并允许连接。

3. 端口占用

如果启动时提示端口被占用，可以修改配置文件中的端口号：

• 后端端口：server/config.yaml中的port字段
• 前端端口：web/vite.config.js中的server.port配置

总结

通过本文的步骤，你已经成功搭建了gin-vue-admin开发平台。这个强大的基础架构将为你的项目开发提供坚实的支持，无论是企业级应用还是个人项目，都能显著提高开发效率。

如果你在使用过程中遇到问题，可以查阅官方文档或加入社区交流。现在，开始你的高效开发之旅吧！

相关资源

• 初始化教程：server/initialize/init.go
• 代码生成器：server/mcp/gva_auto_generate.go
• 表单生成器：web/src/view/systemTools/formCreate.vue