VSCode调试vue项目
先决条件
你必须安装好 Chrome 和 VS Code。同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本。
在可以从 VS Code 调试你的 Vue 组件之前，你需要更新 webpack 配置以构建 source map。做了这件事之后，我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试，即便你的资源已经被 webpack 优化过了也没关系。
打开 config/index.js 并找到 devtool 属性。将其更新为：
如果使用 vue-cli3 你需要设置 vue.config.js 内的 devtool 属性：
进入Debugger视图，添加Chrome配置，将内容替换成以下内容
设置断点
此处response返回数据
启动调试
在终端使用如下命令开启这个应用
进入Debug视图，选择‘vuejs:chrome’配置，然后按F5或点击绿色的play按钮
随着一个新的 Chrome 实例打开 ，你的断点现在应该被命中了。
vscode导入vue组件重复
打开vscode-------文件---------打开文件夹---------选择工程文件夹--------确定查看----终端或者使用“Ctrl+~”调出终端从终端中输入命令进入程序目录，输入npminstall安装vue插件初始化项目，完成后执行npmrundev启动项目，就可以在浏览器中打开页面了，在终端ctrl+c来停止运行。
isualStudioCode（简称“VSCode”）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于MacOSX、Windows和Linux之上的，针对于编写现代Web和云应用的跨平台源代码编辑器。
在 VS Code 中调试vue项目
1.VS Code 中安装Debugger for Chrome扩展的最新版本：
2.在config/development.config.js（官网描述的是config/index.js，所以需要根据具体的项目而定）中添加如下配置：
3.点击运行调试按钮，再点击设置按钮，修改launch.json文件，配置如下：
4.在vue项目的文件中设置断点
5.启动vue项目：
6.点击运行调试按钮，再点击运行小图标，这时会弹出新的chrome浏览器页面。
7.在弹出的浏览器窗口的页面进行操作，触发断点时会跳转掉vscode的断点处。
遇到的问题：
官网中的launch.json配置中"url": " "，url的端口是8080，这样调试时浏览器页面显示“无法显示此网页”。这里需要改成自己本地起的服务的端口号。
参考：
在 VS Code 中调试：
vscode为啥重复引入vue组件
vscode本身是一个源代码编辑器，本身并不具备运行前端应用的功能。
正确的做法是：
首先用本地git客户端将vue项目从github克隆到本地，用vscode打开，完成编辑。
然后在vscode里新打开一个命令行终端，在终端窗口里使用vue对应的脚手架命令启动项目。
注意，这种方式只适用于vue项目开发流程。
