配置VS Code 使其支持vue项目断点调试

npm跑起项目后，在Chrome浏览器F12在控制台就可以进行相对应的断点调试了

注：devtool 设置成eval-cheap-module-source-map打包编译速度会比source-map更快，所以建议在开发环境设置成eval-cheap-module-source-map,生成环境设置成cheap-module-source-map,更多配置可以查看webpack文档

二、VS Code断点调试

=========================================================================

步骤一：安装Debugger for Chrome插件

---

步骤二：配置launc

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

h.json文件

---

注意:**url参数配置要和vue.config.js的devServer保持一致

//launch.json

{

// 使用 IntelliSense 了解相关属性。

// 悬停以查看现有属性的描述。

// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387

“version”: “0.2.0”,

“configurations”: [

{

“type”: “chrome”, //调试的环境

“request”: “launch”, //调试模式：启动类型

“name”: “erp_admin_break”, // 自定义调试名称

“url”: “http://localhost:3000”, //调试的服务地址，需要和devServer对应

“webRoot”: “${workspaceFolder}/src”, //调试的根路径为src业务目录下

“breakOnLoad”: true,

“sourceMapPathOverrides”: { //指定生成的sourceMap路径，参考浏览器生成的 .目录和src目录

“webpack:///src/": "${webRoot}/”,

“webpack:///./src/": "${webRoot}/”

}

}

]

}

Vscode 调试Debugging参数详情说明可以参考 官方文档

步骤三：断点调试项目

---

• 打好断点。

• 启动项目 npm run serve,F5或点击那个绿色的 play 按钮打开调试

• 随着一个新的浏览器实例打开 http://localhost:8080，你的断点现在应该被命中了。
  同时可以借助vscode调试控制台来查看console.log。
  

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。