主流开发工具Vue和微软Visual Studio前后端联合调试攻略

引言

应用主流的前端开发工具Vue和后端开发工具微软Visual Studio 2019，进行前后端联合调试，不适为中小型应用的一种常用简便调试方法，现介绍如下。

Vue

读音/vjuː/，类似view,是一套用于构建用户界面的渐进式JavaScript框架。Vue自底向上逐层应用，只关注视图层，易于上手，与第三方库或既有项目整合，开发复杂的单页应用SPA。

Vue是目前最流行的前端框架之一，axios是Vue中用来与后端交互的工具（类似ajax）。通过axios可以向服务器发送索要数据请求，服务器接收到请求后即会将数据返回给前台。

使用vue前端项目开发(默认前后端分离)，vue-cli脚手架run server，nodejs会启动一个web site，此web site基于node.js实现，如果后端使用java、c#等实现的，此时如何请求后端的数据并进行项目测试？

深入vue-cli脚手架发现，cli脚手架启动的web site默认开启代理功能，可通过设置相关代理信息将请求转发到对应的后端应用程序。

Visual Studio微软集成开发环境

流行的Windows平台应用程序集成开发环境，最新版为 Visual Studio 2019基于.NET Framework 4.8 。

调试步骤主要分三步，即先运行vue环境，再进入后端调试环境，第三步是在浏览器中打开网址进行联调。

1、启动vue-cli

按 win+r，输入cmd回车，进入command命令行环境; 进入项目目录，输入npm run dev回车，启动vue-cli

下图是启动完成之后的内容

2、 启动Visual Studio，进入调试状态

3、打开chrome浏览器运行

浏览器地址栏粘贴链接:8080进入前端程序主界面，就可以进行调试状态；

相关调试按钮如下图所示：