GO学习记录：Gin+vue实现第一个页面

小白写给自己的构建记录。

1、项目结构如下

2、后端部分

2.1 安装 Gin

在 backend/ 目录下，初始化 Go 模块并安装 Gin：

go mod init backend

go get -u github.com/gin-gonic/gin

2.2 安装cors

执行以下命令：

go get github.com/gin-contrib/cors

否则会出现跨域问题。

2.3 在 backend/main.go 中，定义一个简单的 API 路由：

2.4 运行后端

后端在8081端口运行。

go run main.go

3、前端部分

3.1 安装vue

随便找教程吧，安装vue3及以上

3.2 创建前端

在根目录下，通过 Vue CLI 创建项目：

npm install -g @vue/cli

vue create frontend

3.3 向后端 API 发送请求

安装axios

npm install axios

3.3.1 写一个components

在 src/components/HelloWorld.vue 中修改也行，不修改的话重新创建一个页面也行。

3.3.2 在页面中引用它

3.4 配置

在 vue.config.js 中设置代理，将前端的请求转发到后端：

3.5 运行

执行命令

npm run serve

4、 效果

其中图标是在app.vue中，components中的hello from gin也有了。