【web高级 01vue 】 vue预习课01 开发环境准备

一、vscode的安装及使用

1.下载地址

https://code.visualstudio.com/

2.使用指南

2.1代码提示

创建hello.js，体验vscode代码提示功能。

const hello = 'helo';
console.log(hello);

2.2调试

2.2.1调试hello.js ----- 默认支持node调试，F5启动调试

步骤1：打断点
步骤2：按F5，选择node.js环境

在这里插入图片描述
断点被成功截取

2.2.2网页调试

步骤1：需安装Debugger for Chrome

在这里插入图片描述

步骤2：新建index.html，引入hello.js

在这里插入图片描述

步骤3：按F5调试，选择chrome环境

在这里插入图片描述

步骤4：打开launch.json，并修改配置

在chrome和vscode中间建立一个桥梁连接，这样的话才可以进行断点调试
比较常用的配置有两种：.
1.在本地，启一个本地的服务器，以访问http的地址访问，而不是一个文件协议的地址

{
    
    
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
    
    
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            //webRoot：服务器跟地址  
            //"${workspaceFolder}"，按照这个配置，会找不到，404页面
            //${workspaceFolder}指的是当前VUE预习的目录，它所在的根
            //用绝对路径访问，添加/wwwroot
            "webRoot": "${workspaceFolder}/wwwroot"
        }
    ]
}