VScode搭建Vue环境(3)&& 运行演示
目录一、配置环境1、安装cnpm:2、安装router3、安装axios4、安装element二、代码复现1、前端(命令行)2、前端(VScode)3、后端(命令行)4、后端(VScode)参考文章:vue 3.0以上版本脚手架安装(含以下版本脚手架安装)_子鱼非也的博客-CSDN博客_安装vue3.0脚手架这个网站非常基础且全面非常适合新手学习。Vue3 安装 | 菜鸟教程 (runoob.co
目录
参考文章:
vue 3.0以上版本脚手架安装(含以下版本脚手架安装)_子鱼非也的博客-CSDN博客_安装vue3.0脚手架
这个网站非常基础且全面非常适合新手学习。 Vue3 安装 | 菜鸟教程 (runoob.com)
前面我们安装了node, npm,vue:
接下来再安装其他模块cnpm、router、axios、element。
一、配置环境
后端环境配置:
0、安装gorm
gin框架的使用(二)——gorm的安装_今天有怪兽的博客-CSDN博客_gorm安装
在 Go的src的gin-demo目录下通过命令行安装。
go get -u github.com/jinzhu/gorm
如果没有反应先进行下一步。
前端环境配置:
以下的操作命令都是在新的命令行窗口实现(以管理员身份),和前面的搭建Vue环境相似。
1、安装cnpm:
cnpm的安装(超级详细版) - uniapp - 博客园 (cnblogs.com)
npm install -g cnpm --registry=https://registry.npmmirror.com
检验是否安装好的方法:
查看版本:
cnpm -v
如下图表示安装成功:
2、安装router
cnpm install vue-router@4
3、安装axios
npm install axios
4、安装element
npm install element-ui -S
上述模块在菜鸟教程中有具体说明,我就不过多复述了。
二、代码复现
1、前端(命令行)
下面我会用学长的代码进行实际操作:
首先我打开了命令行管理员窗口:
切换到项目前端文件夹中
启动前端服务:
可能是因为这是打包好的文件,使用开发者模式“npm run dev”运行不了。
npm run serve
接着会出现一大堆加载进度代码:
然后复制粘贴网址并在浏览器里打开:
2、前端(VScode)
找到前端项目文件鼠标右键使用VScode打开:
找到src文件夹下的main.js代码:
终端输入指令:
npm run serve
项目开始加载:
同样复制网址进入网页:
复制下面的可以看到,学长不愧是学长,已经完成了服务器部署。
3、后端(命令行)
进入后端项目文件夹,在路径框输入cmd打开命令行 :
执行指令:
go run main.go
可以看到安全警报,点击允许:
我们在去前端进行操作,后台会做出响应:
4、后端(VScode)
与前端大致相同,在后端项目文件夹右键选择VScode打开,然后终端输入指令:
go run main.go 就可以接收前端响应了。
因为没有连接数据库(学长的服务器可能没开)所以不能插入数据,但是无伤大雅,后期我会完成这项任务。
如果大家觉得这些文章对你有所帮助,可以分给我一点点基础分哦。
更多推荐
所有评论(0)