在 VSCode 中开发 Vue 3 项目是非常流畅且高效的，因为 VSCode 提供了许多插件和工具，能够提升开发体验。以下是如何在 VSCode 中设置并开发 Vue 3 项目的步骤：

1. 安装 VSCode

首先，确保您已经安装了 VSCode 编辑器。如果没有，可以通过 VSCode 官方网站 下载并安装。

2. 安装 Node.js 和 npm

Vue 3 需要 Node.js 环境，因此，您需要确保系统中安装了 Node.js 和 npm（npm 是 Node.js 的包管理工具）。您可以通过以下命令检查是否已安装：

node -v
npm -v

如果没有安装，请访问 Node.js 官网 下载并安装。

3. 安装 Vue 3 项目

接下来，您可以通过 Vue CLI 或 Vite 创建 Vue 3 项目。在这里，我们以 Vite 为例，它是现代的构建工具，启动速度非常快。

  1. 创建 Vue 3 项目： 打开终端并运行以下命令： npm create vite@latest my-vue-app --template vue
  2. 进入项目目录： cd my-vue-app
  3. 安装依赖： npm install
  4. 启动开发服务器： npm run dev 打开浏览器并访问 http://localhost:5173，您应该能看到 Vue 3 项目的默认页面。

4. 打开项目到 VSCode

  1. 在 VSCode 中打开您的项目目录：
    • 打开 VSCode。
    • 点击 File（文件）> Open Folder（打开文件夹）。
    • 选择您的项目文件夹（my-vue-app）。
  2. 在 VSCode 中，您将能够看到项目的文件结构，如 src 文件夹、public 文件夹等。

5. 安装 Vue.js 插件

为了提升开发体验，建议在 VSCode 中安装以下插件：

  1. Vetur：这是 Vue.js 的官方插件，提供语法高亮、代码补全、错误提示、格式化、调试等功能。
    • 安装方法：在 VSCode 中打开扩展商店（点击左侧的方块图标），搜索 Vetur 并安装。
  2. ESLint：这是一个 JavaScript 代码质量和风格检查工具，帮助你保持代码风格的一致性。
    • 安装方法：同样通过扩展商店，搜索并安装 ESLint。
  3. Prettier：这是一款代码格式化工具，可以自动格式化代码，保持一致的代码风格。
    • 安装方法：搜索并安装 Prettier – Code formatter 插件。
  4. Vue 3 Snippets：为 Vue 3 提供代码片段（Snippets），加快开发速度。
    • 安装方法：搜索并安装 Vue 3 Snippets 插件。

6. 配置 VSCode

配置 VSCode 以提高开发效率：

  • 启用自动格式化：
    • 打开 VSCode 设置（点击左下角的齿轮图标 > Settings）。
    • 在搜索框中输入 format，然后确保 Editor: Format On Save 选项勾选上。
  • 启用 ESLint 检查：
    • 在设置中搜索 eslint，确保 ESLint: Enable 已启用，确保您的代码符合规定的风格。

7. 开发 Vue 3 组件

在 VSCode 中创建 Vue 组件非常简单。您可以在 src/components 目录下创建 .vue 文件，以下是一个基本的 Vue 3 组件示例：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue 3!"
    };
  },
  methods: {
    changeMessage() {
      this.message = "You clicked the button!";
    }
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

8. 运行和调试

在 VSCode 中，您可以直接通过集成的终端运行 npm run dev 来启动开发服务器。此外，您还可以使用 Chrome DevTools 来调试 Vue 应用。

调试 Vue 3 应用

  1. 在 VSCode 中安装 Debugger for Chrome 插件：
    • 打开扩展商店，搜索并安装 Debugger for Chrome 插件。
  2. 创建调试配置：
    • 按 Ctrl+Shift+D 打开调试面板。
    • 点击 “create a launch.json file” 来创建一个调试配置，选择 Chrome。
  3. 配置 launch.json 文件： 在 launch.json 文件中，添加以下配置： { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:5173", "webRoot": "${workspaceFolder}" } ] }
  4. 开始调试：
    • 在 VSCode 中按 F5 或点击调试面板上的绿色播放按钮来启动调试。
    • 这将打开 Chrome 浏览器并启动调试会话，您可以在 VSCode 中设置断点并调试您的代码。

9. 使用 Git 进行版本控制

如果您的项目还没有使用 Git 进行版本控制，您可以在 VSCode 中使用集成的 Git 支持。

  • 初始化 Git 仓库：在终端中运行以下命令： git init
  • 提交代码：
    • 在 VSCode 中，打开 Source Control（源代码控制）面板。
    • 点击 + 来暂存更改，输入提交信息，然后点击提交按钮。
  • 推送到 GitHub（可选）：
    • 如果您有一个 GitHub 仓库，可以将您的代码推送到远程仓库。

10. 总结

在 VSCode 中开发 Vue 3 项目，您可以享受高效的开发体验，得益于 VSCode 强大的插件系统和集成开发工具。通过以下几个步骤，您可以顺利启动和开发 Vue 3 应用：

  1. 安装和设置 VSCode。
  2. 使用 Vue CLI 或 Vite 创建 Vue 3 项目。
  3. 安装必需的 VSCode 插件（如 Vetur、ESLint、Prettier 等）。
  4. 在 VSCode 中编写、调试和管理 Vue 3 代码。

希望这对您有所帮助！如果有任何问题，随时联系我。