(笔记整理）vue.js 的使用工具之VsCode使用教程（9）

调试页面
1/

2/

打开vue项目后配置

选择chrome调试方式后，跳出lauch.json 进行配置

三、新建一个html直接采用Chrome来进行调试的实现方案
3.1 首先安装,如下图。方法已经特别具体，再此不再赘述。

3.2 在自己的html工程目录下面点击f5,或者在左侧选择调试按钮

但是直接打开的chrome将会出现如下错误

3.3.解决以上问题
首先在弹出来的launch.json中添加以下内容

3.4 然后在调试页面中选择对应的scheme

，在上方

，选择下拉按钮，会有一个添加，选择chrome

4.2 实现TODO的指示功能
首先安装对应的插件

其次重启Vscode,就可以看到如图所示的TODO的树形结构

五、参考链接和书籍
https://www.cnblogs.com/shujuan841019/p/5501083.html
https://www.cnblogs.com/mxk-star/p/7279785.html
https://www.cnblogs.com/kaiye/p/5397345.html

其它操作：

1、不小心隐藏了活动栏

查看-外观-显示活动栏

2、 调用控制台/问题/输出/终端 视图不显示

单击菜单 -查看- 输出/调试控制台/终端/问题 其中的任何一项
则能显示面板

3、在vs 环境启动 vue 程序
（前题是各设置已经完成）
打开 终端 面板 输入命令
第一步

npm run dev

第二步
1单击带 运行按钮 （虫子）
2然后 单击运行 旁边的 运行按钮 （三角）

3、进行到web页面

注：因为本系统为关联了redis 数据库 , 所以在启动程序前需要先启动redis，另见redis操作步骤