网站首页 > 技术文章 正文
本文介绍了基于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项目能使用上面生成的前端文件
- 使用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",保存。
- 打开终端,进入gf-vue3-demo项目目录,启动服务:
cd ~/go/src/gf-vue3-demo
gf run main.go
- 打开浏览器,访问地址:http://localhost:8199,看到先前在调试中看到的 'Hello Vue 3 + Vite'内容。
- 当前端修改完成之后,使用yarn build生成即可让后端直接使用。
- 上一篇: 前端开发环境(一)
- 下一篇: ES6基础——环境构建、任务自动化、服务器搭建
猜你喜欢
- 2024-11-27 保姆级教学:前端使用docker搭建mysql环境并通过node修改数据
- 2024-11-27 ES6基础——环境构建、任务自动化、服务器搭建
- 2024-11-27 前端开发环境(一)
- 2024-11-27 零基础学习web前端开发,看看一下建议少走弯路
- 2024-11-27 基于 Vue3+TS 构建Cesium组件库VueCesium
- 2024-11-27 万能前端框架uni app初探01:搭建开发环境
- 2024-11-27 一步步从头搭建 Vue 开发环境
- 2024-11-27 windows搭建本地grafana前端开发环境
- 2024-11-27 搭建H5开发环境(windows)
- 2024-11-27 第一天:先搭建前端项目
你 发表评论:
欢迎- 596℃几个Oracle空值处理函数 oracle处理null值的函数
- 591℃Oracle分析函数之Lag和Lead()使用
- 578℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 574℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 570℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 564℃【数据统计分析】详解Oracle分组函数之CUBE
- 550℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 543℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端懒加载 (49)
- 前端获取当前时间 (50)
- 前端接口 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)