VScode搭建Vue环境（3）&& 运行演示

目录

一、配置环境

1、安装cnpm:

2、安装router

3、安装axios

4、安装element

二、代码复现

           1、前端（命令行）

           2、前端（VScode）

  3、后端（命令行）

  4、后端（VScode）

---

参考文章：

vue 3.0以上版本脚手架安装（含以下版本脚手架安装）_子鱼非也的博客-CSDN博客_安装vue3.0脚手架

这个网站非常基础且全面非常适合新手学习。 Vue3 安装 | 菜鸟教程 (runoob.com)

前面我们安装了node， npm，vue：

在VScode搭建Vue环境_代码骑士的博客-CSDN博客

VScode搭建Vue环境（2）_代码骑士的博客-CSDN博客

接下来再安装其他模块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  就可以接收前端响应了。

 

          因为没有连接数据库（学长的服务器可能没开）所以不能插入数据，但是无伤大雅，后期我会完成这项任务。

如果大家觉得这些文章对你有所帮助，可以分给我一点点基础分哦。