vscode调试 vue等前端源码调试

本文介绍了Vue3项目的调试方法,包括使用VSCode进行调试的具体步骤,并提到了TS源码的调试方式。适用于已安装Vue3及依赖环境的开发者。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、vue的调试方法

假设你已经有一份vue3源码,并且依赖安装完毕。如果没有安装pnpm 请自行搜索全局安装pnpm,然后vue3的项目中安装依赖是 pnpm install。

调试方法一:首先要在vscode中运行 npm run dev 编译启动项目

1、直接在vscode中点击最左侧的调试按钮 一般有个小虫子形状。

2、在打开的调试侧边栏中点击属性设置按钮,如下图所示的顺序2,这时会弹出launch.json配置文件

3、在配置文件里修改你想要启动项目的地址,如下图顺序3。

4、最后点击调试侧边栏上方的调试启动箭头,会以调试方式启动项目

二、ts调试方法

现在一般前端框架不单纯的只有vue源码,还有ts源码,ts源码用vscode目前发现只能加  debugger; 语句调试

### 设置和使用 Vue3 在 Visual Studio Code 中进行前端开发 #### 安装必要的环境依赖 为了在Visual Studio Code中顺利开展Vue3项目,安装Node.js和npm是必不可少的前置条件[^1]。 #### 配置 VSCode 和安装插件 对于Vue3项目的高效开发而言,在VSCode里安装一系列辅助工具和插件可以极大提升工作效率。建议安装如下插件: - **Chinese简体中文语言包**:提供界面汉化支持。 - **Code Spell Checker**:帮助修正代码中的拼写错误。 - **HTML CSS Support**:增强对HTML/CSS的支持能力。 - **JavaScript (ES6) code snippets**:提供JS/TS片段模板加速编码过程。 - **Path Intellisense**:智能感知路径补全模块导入语句。 - **vue3-snippets-for-vscode**:专为Vue3定制的代码片段集合。 - **VueHelper**:简化常用操作流程并提高生产力。 - **Auto Close Tag/Auto Rename Tag**:自动闭合标签与同步重命名成对标记。 - **Beautify**:美化代码结构使其更易读取维护。 - **Bracket Pair Colorizer**:通过不同颜色区分括号层次关系(此功能现已内置于最新版本中)。 - **open in browser**:方便快速打开网页查看效果。 - **Vetur**:集成了语法高亮、Emmet缩写展开等功能于一体的综合性Vue开发利器。 - **IntelliJ IDEA Keybindings**:模拟IDEA系列产品的快捷方式习惯[^4]。 #### 创建新项目 利用`@vue/cli`命令行工具创建新的Vue应用实例: ```bash npm install -g @vue/cli vue create my-vue-app cd my-vue-app ``` #### 启动本地服务器 进入刚刚建立好的文件夹目录下执行启动指令来开启服务端口监听以便于调试页面布局设计等方面的内容: ```bash npm run serve ``` #### 实现即时预览功能 借助Live Server扩展程序可以在不切换至其他应用程序的情况下实现所见即所得式的交互体验——只需按下组合键调出命令面板搜索框之后输入“live”,此时右侧将会弹出专门用于展示渲染后的文档视图区域;每当源码发生变动时它都会随之刷新显示最新的改动成果[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值