vscode vite

### 如何在 VSCode 中设置和使用 Vite 进行开发

#### 安装依赖包
为了开始使用 Vite，在项目根目录下初始化一个新的 npm 或者 pnpm 项目，并安装必要的依赖项。对于 Vue3 和 TypeScript 的组合，可以通过如下命令来完成环境准备：

pnpm init vite@latest my-vue-app --template vue-ts
cd my-vue-app
pnpm install

这会创建一个基于 Vue3 和 TypeScript 的模板工程[^1]。

#### 配置 `vite.config.ts`
确保项目的配置文件`vite.config.ts`已正确定义以便支持源映射功能，这对于调试非常重要。下面是一段典型的配置代码片段：

import { defineConfig } from 'vite'
export default defineConfig({
    build: {
        sourcemap: true,
    },
})

此配置使得编译后的 JavaScript 文件能够正确反映原始的 TypeScript 源码位置，从而让断点更加精准[^2]。

#### 启动开发服务器
通过执行以下命令启动本地开发服务器：

pnpm dev

此时应该能够在控制台看到类似 "Local: http://localhost:3000/" 的提示信息表示服务已经成功启动。

#### 设置断点进行调试
打开 VSCode 并加载刚刚创建的工作区。点击左侧活动栏中的“运行和调试”，然后选择对应的启动配置（如 `vue3-demos`），最后按下绿色箭头按钮开启调试模式。现在可以在任意 `.ts` 或`.vue` 文件里按需插入断点了。如果遇到断点定位不准的情况，尝试刷新浏览器页面即可改善这一状况[^3]。

#### 实现即时反馈机制
得益于 Vite 提供的强大热更新能力，开发者几乎感受不到重新加载的时间间隔。当修改了组件样式或是脚本逻辑之后，只需保存更改就能立即查看效果变化而无需手动重启整个应用。