在VSCode中打开Vue3项目: 使用VSCode打开你的Vue3项目文件夹。确保项目已经通过Vue CLI或Vite等工具创建,并且已经安装了所有必要的依赖。 在VSCode的左侧菜单栏选择“Run and Debug”: 在VSCode的左侧菜单栏中,点击“Run and Debug”图标,或者按Ctrl+Shift+D(Windows/Linux)或Cmd+Shift+D(Mac)打开调试面板。
这里以vscode举例,首先我们需要打开终端,然后点击终端中的+号旁边的下拉箭头,在下拉中点击Javascript Debug Terminal就可以启动一个debug终端。 假如vue文件编译为js文件是一个毛线团,那么他的线头一定是vite.config.ts文件中使用@vitejs/plugin-vue的地方。通过这个线头开始debug我们就能够梳理清楚完整的工作流程。 vuePl...
{"editor.fontSize": 14,"debug.console.fontSize": 14,"terminal.integrated.fontSize": 14,//使用主题"workbench.colorTheme": "Solarized Light (no bold)","window.openFilesInNewWindow": "on",//配置对 .vue 文件的格式化"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"prettier...
vscode 左边 会有一个edge的操作按钮,用于浏览器调试 打开测试代码 test.html 中,按 F5 ,唤醒调式操作界面 点击最右侧的调试图标可在vscode内部预览项目 vscode中预览项目效果 代码中添加debugger 在代码中直接加 debugger 在vscode 编辑器的函数左边添加 小红点,点击即可 直接在vscode中使用vue项目调试Vue源代码 步骤...
从上一篇文章我们知道了transform函数是在node端执行的,所以我们需要启动一个debug终端,才可以在node端打断点。这里以vscode举例,首先我们需要打开终端,然后点击终端中的+号旁边的下拉箭头,在下拉中点击Javascript Debug Terminal就可以启动一个debug终端。 接着在debug终端中执行yarn dev(这里是以vite举例)。在浏览器中...
3、使用 VSCode 在VSCode 中,我们可以建立一个 task 来运行 JS,实际上是借助内置终端来执行 node 命令运行JS! 快捷键:CMD + Shift + B 配置文件 /.vscode/tasks.json { // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0...
2.VSCode需要安装ESLint插件: 3.解决eslint和prettier冲突的问题: 安装插件:(vue在创建项目时,如果选择prettier,那么这两个插件会自动安装) npm i eslint-plugin-prettier eslint-config-prettier -D 添加prettier插件: extends: [ "plugin:vue/vue3-essential", ...
首先我们需要启动一个debug终端,才可以在node端打断点。这里以vscode举例,首先我们需要打开终端,然后点击终端中的+号旁边的下拉箭头,在下拉中点击Javascript Debug Terminal就可以启动一个debug终端。 debug-terminal 然后给transformElement函数打个断点,transformElement函数在node_modules/@vue/compiler-core/dist/compiler...
编译实际发生于node环境，而不是浏览器端。通过调试工具如VSCode的Javascript Debug Terminal，我们可以在vite.config.ts中使用@vitejs/plugin-vue的地方设置断点。这里，关键的函数是vuePlugin，它包含了buildStart和transform钩子，分别在服务器启动和模块解析时被调用。当启动服务，会首先调用buildStart钩子，...
还是一样的套路启动一个debug终端。这里以vscode举例,打开终端然后点击终端中的+号旁边的下拉箭头,在下拉中点击Javascript Debug Terminal就可以启动一个debug终端。 debug-terminal 给transformElement函数打个断点,transformElement函数的代码位置在:node_modules/@vue/compiler-core/dist/compiler-core.cjs.js。