本文介绍了基于vite2+vue3作为前端，Goframe作为后端的全栈开发环境的搭建，试运行"Hello World！"，自己做个记录，也方便需要的朋友参考。

一、准备工作

1.1 安装golang。本教程不提供，有需要可参考：https://www.cnblogs.com/new_2050/p/7594827.html，安装最新版即可。

注意配置环境变量：

go env -w GOPROXY=https://goproxy.io,direct
# Set environment variable allow bypassing the proxy for selected modules
# go env -w GOPRIVATE=*.corp.example.com
go env -w GO111MODULE=on
安装goframe

1.2 安装goframe

本教程从GF-CLI开发工具使用开始.

下载地址：

Linux (amd64): https://goframe.org/cli/linux_amd64/gf

Mac (amd64): https://goframe.org/cli/darwin_amd64/gf

Windows (amd64): https://goframe.org/cli/windows_amd64/gf.exe

下载完成后，通过gf install命令安装。

Mac

wget https://goframe.org/cli/darwin_amd64/gf && chmod +x gf && ./gf install

如果您的终端使用的是zsh, 您需要执行alias gf=gf命令以便解决gf工具名称和git fetch简化指令冲突的问题。

Linux

wget https://goframe.org/cli/linux_amd64/gf && chmod +x gf && ./gf install

Windows下载后执行，随后根据提示执行安装。

【来源】：https://github.com/gogf/gf-cli/blob/master/README_ZH.MD

安装完成之后运行gf得到以下结果，即表示安装成功。

$ gf
USAGE
   gf COMMAND [ARGUMENT] [OPTION]

COMMAND
   env       show current Golang environment variables
    get       install or update GF to system in default...
   gen       automatically generate go files for ORM models...
   mod       extra features for go modules...
   run       running go codes with hot-compiled-like feature...
   init       initialize an empty GF project at current working directory...
   help       show more information about a specified command
   pack       packing any file/directory to a resource file, or a go file...
   build     cross-building go project for lots of platforms...
   docker     create a docker image for current GF project...
   swagger   swagger feature for current project...
   update     update current gf binary to latest one (might need root/admin permission)
   install   install gf binary to system (might need root/admin permission)
   version   show current binary version info

OPTION
    -y         all yes for all command without prompt ask
    -?,-h     show this help or detail for specified command
    -v,-i     show version information

ADDITIONAL
   Use 'gf help COMMAND' or 'gf COMMAND -h' for detail about a command, which has '...'
    in the tail of their comments.

1.3 安装Nodejs+yarn

Nodejs安装教程，请参考：https://www.runoob.com/nodejs/nodejs-install-setup.html

安装 yarn【yarn介绍：https://blog.csdn.net/yw00yw/article/details/81354533】

npm install -g yarn

安装成功后，查看版本号：yarn --version

二、Goframe 初始化，用作后端

使用gf工具初始化项目

#进入`go/src`目录
cd ~/go/src
gf init gf-vue3-demo
#initializing...
#initialization done! 
#you can now run 'gf run main.go' to start your journey, enjoy!
  
#进入gf-vue3-demo目录
cd gf-vue3-demo

#根据go.mod文件处理依赖关系
go mod tidy

#运行示例
gf run main.go

打开浏览器，访问地址：http://localhost:8199/hello,出现Hello World!,表示成功。

三、 使用vite2+vue3初始化前端

#进入目录
cd ~/go/src/gf-vue3-demo

#创建名为webapp的前端应用
yarn create @vitejs/app webapp --template vue

#进入前端目录
cd webapp

#安装依赖
yarn

#运行前端测试服务器
yarn dev

打开浏览器，访问：http://localhost:3000 在浏览器中看到 'Hello Vue 3 + Vite'，表示成功。

按住ctrl+c取消运行，我们生成正式的前端（此步骤在开发的时候，是指端开发完成之后的生成正式版本阶段），运行以下命令：

#前端开发到可以生成正式版本之后，使用以下命令生成
yarn build

默认的情况下，就会在项目目录下，本例为webapp下生成dist目录。

四、调整goframe项目的配置文件

配置完成之后，让gf-vue3-demo项目能使用上面生成的前端文件

1. 使用code命令打开gf-vue3-demo项目，打开config目录下的config.toml文件，修改内容如下：

[server]
 Address     = ":8199"
 # ServerRoot = "public"
 ServerRoot = "webapp/dist"
 ServerAgent = "gf-app"
 LogPath     = "/tmp/log/gf-app/server"

将其中ServerRoot = "public"修改为：ServerRoot = "webapp/dist",保存。

3. 打开终端，进入gf-vue3-demo项目目录，启动服务：

cd ~/go/src/gf-vue3-demo
gf run main.go

4. 打开浏览器，访问地址：http://localhost:8199,看到先前在调试中看到的 'Hello Vue 3 + Vite'内容。
5. 当前端修改完成之后，使用yarn build生成即可让后端直接使用。