VS新建Vue项目步骤

此时遇到报错

解决办法:

一个一个命令试,我这里只试了第一个就可以了.

3.npm install

进入到刚刚创建的"vuex-demo"文件夹下, 运行此命令后,node_modules 就会自动生成.

4.npm run dev

1.VS Code 中安装Debugger for Chrome扩展的最新版本：

2.在config/development.config.js（官网描述的是config/index.js，所以需要根据具体的项目而定）中添加如下配置：

3.点击运行调试按钮，再点击设置按钮，修改launch.json文件，配置如下：

4.在vue项目的文件中设置断点

5.启动vue项目：

6.点击运行调试按钮，再点击运行小图标，这时会d出新的chrome浏览器页面。

7.在d出的浏览器窗口的页面进行 *** 作，触发断点时会跳转掉vscode的断点处。

遇到的问题：

官网中的launch.json配置中"url": " http://localhost:8080 "，url的端口是8080，这样调试时浏览器页面显示“无法显示此网页”。这里需要改成自己本地起的服务的端口号。

参考：

在 VS Code 中调试： https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

先决条件

你必须安装好 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 实例打开 http://localhost:8080，你的断点现在应该被命中了。

---