Goframe+Vue3全棧開發入門1—

本文介紹了基於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。comgo 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得到以下結果，即表示安裝成功。

$ gfUSAGE 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 infoOPTION -y all yes for all command without prompt ask -？，-h show this help or detail for specified command -v，-i show version informationADDITIONAL 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/srcgf 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專案能使用上面生成的前端檔案

使用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”，儲存。