您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

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

时间:2022-03-21 15:12:22  来源:  作者:jn人在旅程

引言

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

Vue

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

 

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

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

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

 

使用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

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

 

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

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

 

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

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

 

3、打开chrome浏览器运行

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

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

 

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

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

 



Tags:开发工具   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
引言应用主流的前端开发工具Vue和后端开发工具微软Visual Studio 2019,进行前后端联合调试,不适为中小型应用的一种常用简便调试方法,现介绍如下。Vue 读音/vjuː/,类似view,是...【详细内容】
2022-03-21  Tags: 开发工具  点击:(2)  评论:(0)  加入收藏
程序是如何被执行的  程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  Tags: 开发工具  点击:(100)  评论:(0)  加入收藏
IT之家 10 月 20 日消息,据 9to5 Mac 报道,继 iOS 15.1 RC、macOS Monterey RC 和其他更新发布后,苹果也向开发者提供了 Xcode 13.1 RC(候选版)。最新版本的 Xcode 现在可以在苹...【详细内容】
2021-10-20  Tags: 开发工具  点击:(132)  评论:(0)  加入收藏
IT之家 8 月 12 日消 苹果今日发布了一款新的开发者工具,旨在强制那些运行 iOS 15 和 iPadOS 15 的设备在使用不安全的 WiFi 网络或 WiFi 速度较慢时优先使用 5G 连接而不是...【详细内容】
2021-08-12  Tags: 开发工具  点击:(197)  评论:(0)  加入收藏
以下文章来源于macrozheng ,作者梦想de星空 macrozheng专注Java技术分享,涵盖SpringBoot、SpringCloud、Docker、中间件等实用技术,作者Github开源项目mall(40K+Star)。 作为Jav...【详细内容】
2021-06-15  Tags: 开发工具  点击:(139)  评论:(0)  加入收藏
作为仓鼠,过来把这里作为树洞。1、Visual Studio 的 Python 开发插件 PTVSPTVS (Python Tools for Visual Studio) 是一个开源项目,采用Apache 2.0许可发布。PTVS的主要特性包...【详细内容】
2021-06-04  Tags: 开发工具  点击:(162)  评论:(0)  加入收藏
然后我们再来看看,androidstudio的布局编辑器的使用. 可以先打开layout中的一个xml去看看,右边有所见即所得的编辑器,以前用eclipse,都是跑起来看,太麻烦了. ​可以看...【详细内容】
2021-04-14  Tags: 开发工具  点击:(365)  评论:(0)  加入收藏
2月2日,阿里云AIoT宣布其物联网应用开发工具IoT Studio用户数已经突破10万。IoT Studio是阿里云在应用开发领域打造的一站式、低成本、高稳定、易定制的物联网生产力工具,可帮...【详细内容】
2021-02-04  Tags: 开发工具  点击:(195)  评论:(0)  加入收藏
工欲善其事,必先利其器。STM32Cube生态系统是ST为STM32开发者打造的软件生态,是嵌入式开发的利器。为提升功能丰富且高能效的STM32系列微控制器的易用性,2019年,意法半导体在STM...【详细内容】
2021-01-22  Tags: 开发工具  点击:(219)  评论:(0)  加入收藏
好看的办公楼千篇一律,有趣的纬软人万里挑一!大家好,我是纬小创!作为优秀的打工人,拥有一些实用的工具,往往可以让工作效率翻倍提升。今天纬小创给大家介绍10款阿里Java程序员常用...【详细内容】
2020-12-16  Tags: 开发工具  点击:(114)  评论:(0)  加入收藏
▌简易百科推荐
引言应用主流的前端开发工具Vue和后端开发工具微软Visual Studio 2019,进行前后端联合调试,不适为中小型应用的一种常用简便调试方法,现介绍如下。Vue 读音/vjuː/,类似view,是...【详细内容】
2022-03-21  jn人在旅程    Tags:开发工具   点击:(2)  评论:(0)  加入收藏
我是3y,一年CRUD经验用十年的markdown程序员‍常年被誉为优质八股文选手花了几天搭了个后台管理页面,今天分享下我的搭建过程,全文非技术向,就当跟大家吹吹水吧。 1、我的前...【详细内容】
2022-03-18  程序那点事    Tags:低代码   点击:(14)  评论:(0)  加入收藏
实现方式水印的实现方式有很多,根据实现功能的人员分工可以分为前端水印和后端水印,前端水印的优点可以总结为三点,第一,可以不占用服务器资源,完全依赖客户端的计算能力,减少服务...【详细内容】
2022-03-18  Mason程    Tags:前端   点击:(6)  评论:(0)  加入收藏
css 伪类是用于向某些选择器添加特殊的效果,是动态的,指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样...【详细内容】
2022-03-18  前端苏蘇    Tags:CSS伪类   点击:(6)  评论:(0)  加入收藏
在Vue3中使用全局的函数1、新建1个js文件,包含所需要注册的函数//src/assets/func.jsexport function http() { alert("http")}export function https() { alert("http...【详细内容】
2022-03-17  GolangVue    Tags:Vue3   点击:(16)  评论:(0)  加入收藏
Vue3 PC端页面开发规范1.开发环境Vue开发环境: 软件 版本 node.js v16.14.0 vue @vue/cli 5.0.1 UI 框架: ...【详细内容】
2022-03-16  janep    Tags:Vue3   点击:(12)  评论:(0)  加入收藏
Ant Design是蚂蚁金服推出的一款用于研发企业级中后台产品设计体系的 React UI 组件库。第一个公开版本是2015年发布的,算是比较早的了。一开始大部分程序员都认为这是阿里K...【详细内容】
2022-03-11  小小咪学前端    Tags:I组件库   点击:(17)  评论:(0)  加入收藏
简答题1、什么是防抖和节流?有什么区别?如何实现?参考答案防抖触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间 思路:每次触发事件时都取消之前...【详细内容】
2022-03-03  棒棒糖gul    Tags:前端   点击:(19)  评论:(0)  加入收藏
一篇讲透“大”前端说到前端大家就会想到浏览器,对!前端的主要工作就是通过浏览器显示你要展现的内容。之前的浏览器性能和产品多样、性能差别大、语法还不通一(那个调试过程真...【详细内容】
2022-03-03  寒冰纪    Tags:前端   点击:(19)  评论:(0)  加入收藏
. 下载安装 cnpm install vuex -S ;本次下载的版本是 "vuex": "^4.0.2"2.创建store/index.jsimport { createStore } from 'vuex'import http from '@/utils/ht...【详细内容】
2022-02-28  向前9527    Tags:vue3   点击:(24)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条