Vite+Vue+VsCode

2024-07-31

使用 Vite 在 VSCode 中搭建 Vue 开发环境

以下是步骤，指导你如何在 Visual Studio Code (VSCode) 中使用 Vite 搭建 Vue 开发环境。

1. 安装 Node.js 和 npm

首先，你需要安装 Node.js 和 npm（Node 包管理器）。可以从 Node.js 官方网站下载并安装。

2. 使用 Vite 创建 Vue 项目

打开 VSCode 的终端（可以使用快捷键 Ctrl + (反引号)）并执行以下命令以使用 Vite 创建一个新的 Vue 项目：

1

npm create vite@latest my-vue-app --template vue

这个命令将创建一个名为 my-vue-app 的目录，并在其中初始化一个基于 Vue 的项目。

3. 安装依赖

进入项目目录并安装项目所需的依赖：

1
2


cd my-vue-app
npm install

4. 启动开发服务器

运行以下命令启动开发服务器：

1

npm run dev

服务器启动后，默认情况下，你可以在浏览器中访问 http://localhost:5173 查看你的 Vue 项目。

5. 在 VSCode 中打开项目

打开 VSCode，然后选择 File -> Open Folder，导航到你的项目目录 my-vue-app 并打开它。你现在可以在 VSCode 中查看和编辑你的 Vue 项目。

6. 安装 Vue.js 插件（可选）

为了提高开发效率，可以安装一些 VSCode 插件：

Vetur 或 Volar：为 Vue.js 提供语法高亮、代码补全、格式化和错误检查等功能。Volar 是 Vue 3 推荐的插件，而 Vetur 支持 Vue 2 和 Vue 3。
ESLint：静态代码分析工具，帮助你在编写代码时发现并修复问题。

在 VSCode 的扩展市场中搜索并安装这些插件。

7. 配置 ESLint（可选）

为确保代码质量和一致性，建议配置 ESLint。可以在项目中添加 ESLint：

1

npm install eslint eslint-plugin-vue --save-dev

然后初始化 ESLint 配置：

1

npx eslint --init

按照提示进行配置，确保选择了适用于 Vue 的配置。

在项目根目录下创建一个 .eslintrc.js 文件，并添加以下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'vue',
  ],
  rules: {
    // 你可以在这里添加自定义的 ESLint 规则
  },
};

8. 配置 Prettier（可选）

Prettier 是一个代码格式化工具，可以和 ESLint 一起使用，以确保代码风格一致。安装 Prettier：

1

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

在项目根目录下创建一个 .prettierrc 文件，并添加以下内容：

1
2
3
4
5


{
  "semi": true,
  "singleQuote": true,
  "printWidth": 80
}

在 .eslintrc.js 文件中，添加 Prettier 配置：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    'plugin:prettier/recommended' // 添加这一行
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'vue',
    'prettier' // 添加这一行
  ],
  rules: {
    'prettier/prettier': 'error' // 添加这一行
  },
};

9. 配置 VSCode 的保存时自动格式化（可选）

为了在保存时自动格式化代码，可以在 VSCode 的设置中添加以下内容：

打开 VSCode 设置（快捷键 Ctrl + ,）。
搜索 format on save，然后勾选 Editor: Format On Save。
在 .vscode 目录下创建 settings.json 文件（如果没有该目录则新建），并添加以下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ],
  "prettier.requireConfig": true
}

总结

通过以上步骤，你应该能够在 VSCode 中使用 Vite 搭建一个完整的 Vue 开发环境。这包括创建项目、安装依赖、启动开发服务器、配置 ESLint 和 Prettier 等。如果有任何问题或需要进一步的帮助，请随时告诉我。