如何使用VSCode调试Vue3+TypeScript+Vite应用

目前 Vue3+TypeScript+Vite 这套组合已经成为了越来越流于的Web应用开发架构，我也要紧跟时代，把这块知识补一补。

我的学习习惯是在学习一门新知识之前，先将它的开发环境和调试环境搭建好，这样学习起来才能事半功倍，正所谓 “磨刀不误砍柴功” 嘛！

今天我就将 Vue3+TypeScript+Vite 这套组合的开发环境和调试环境的搭建过程记录以下，一方面是为自己作个学习记录，另一方面也可以帮助其它人少走些弯路，这种事情是我特别喜欢做的。

首先来看一下如何创建 Vue3+TypeScript+Vite 这套组合的开发环境。

搭建 Vue3+TypeScript+Vite 开发环境

其实 Vue3+TypeScript+Vite 这套组合的开发环境特别好搭建，在 官方 的文档中就有说明，其过程如下：

> npm init vue@latest

该命令会安装并执行 create-vue，它是Vue官方的项目脚手架，之后你会看到下面的信息：

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / [Yes]
✔ Add JSX Support? … [No] / Yes
✔ Add Vue Router for Single Page Application development? … [No] / Yes
✔ Add Pinia for state management? … [No] / Yes
✔ Add Vitest for Unit testing? … [No] / Yes
✔ Add Cypress for both Unit and End-to-End testing? … [No] / Yes
✔ Add ESLint for code quality? … [No] / Yes
✔ Add Prettier for code formatting? … [No] / Yes

Scaffolding project in ./<your-project-name>...
Done.

在上面的信息中，选择[]中的选项即可。再执行下面的命令就可以将依赖安装好，并启动开发服务器：

> cd <your-project-name>
> npm install
> npm run dev

至此，Vue3+TypeScript+Vite 这套组合的开发环境就搭建好了。

搭建 Vue3+TypeScript+Vite 调试环境

Vue3+TypeScript+Vite 这套组合的调试环境也非常好搭建，首先将VSCode安装好，VSCode可以从这里下载。

之后进入到前面创建的项目中，执行下面命令

#进入到之前创建的vue项目
code .

在保证 开发服务器已经启动 的情况下，点击:

VSCode-> 左侧工具栏 -> 调试与运行 -> 创建launch.json

将launch.json中的内容修改如下：

{
    "version":"0.2.0",
    "confiugrations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Vue App",
            "url": "http://localhost:5173",
            "webRoot": "${worksapceFolder}/dist"
        }
    ]
}

配置好VSCode后，我们就可以友好的调试咱们自己的程序了。