VSCode搭建Vue.js项目环境(从零开始，前端开发必备)-VSCode-PHP中文网

VSCode搭建Vue.js项目环境(从零开始，前端开发必备)

爱谁谁

发布： 2025-08-18 20:13:34

原创

561人浏览过

搭建VSCode Vue.js项目环境需先安装Node.js，再通过Vue CLI创建项目，随后安装Vetur、ESLint、Prettier等插件并配置代码规范，最后运行项目；具体步骤包括配置文件关联、设置保存自动格式化及团队规范适配。

vscode搭建vue.js项目环境(从零开始，前端开发必备)

搭建VSCode Vue.js项目环境，核心在于安装必要的插件、配置ESLint和Prettier，以及熟悉Vue CLI的使用。目标是让你的开发体验更流畅，代码更规范，效率更高。

解决方案

安装VSCode插件：
- Vetur: 这是Vue.js开发的必备插件，提供语法高亮、智能提示、代码片段、错误检查等功能。搜索“Vetur”并安装。
- ESLint: 用于代码质量检查，确保代码风格一致。搜索“ESLint”并安装。
- Prettier - Code formatter: 自动格式化代码，保持代码美观。搜索“Prettier”并安装。
- Auto Close Tag: 自动闭合HTML/XML标签，提高编码速度。搜索“Auto Close Tag”并安装。
- Auto Rename Tag: 修改HTML/XML标签时，自动同步修改闭合标签。搜索“Auto Rename Tag”并安装。
安装Node.js和npm (或 yarn/pnpm):

Vue.js项目依赖Node.js环境。访问Node.js官网下载并安装LTS版本。安装完成后，npm会随之安装。也可以选择使用yarn或pnpm作为包管理器。

立即学习“前端免费学习笔记（深入）”；
- 验证安装: 在命令行输入
```
node -v
```
  登录后复制
  和
```
npm -v
```
  登录后复制
  （或
```
yarn -v
```
  登录后复制
  /
```
pnpm -v
```
  登录后复制
  ），如果显示版本号，则安装成功。
安装Vue CLI:

Vue CLI是Vue.js的官方脚手架工具，用于快速创建和管理Vue.js项目。
- 全局安装: 在命令行输入
```
npm install -g @vue/cli
```
  登录后复制
  (或
```
yarn global add @vue/cli
```
  登录后复制
  /
```
pnpm add -g @vue/cli
```
  登录后复制
  )。
- 验证安装: 在命令行输入
```
vue --version
```
  登录后复制
  ，如果显示版本号，则安装成功。
创建Vue.js项目:
- 使用Vue CLI: 在命令行进入你想要创建项目的目录，输入
```
vue create 项目名称
```
  登录后复制
  。
- 选择预设: Vue CLI会提示你选择一个预设。可以选择默认的(Default preset)或者手动选择特性(Manually select features)。建议新手选择Default preset，熟悉后再尝试手动选择。
- 等待安装: Vue CLI会自动下载并安装项目所需的依赖。

配置ESLint和Prettier:

安装依赖: 进入项目目录，运行

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

登录后复制

(或

yarn add eslint prettier eslint-plugin-vue --dev

登录后复制

pnpm add eslint prettier eslint-plugin-vue --save-dev

登录后复制

)。

创建配置文件: 在项目根目录下创建

.eslintrc.js

登录后复制

和

.prettierrc.js

登录后复制

文件。

.eslintrc.js 示例:

module.exports = {
    root: true,
    env: {
        node: true,
    },
    extends: [
        'plugin:vue/essential',
        'eslint:recommended',
    ],
    parserOptions: {
        parser: 'babel-eslint',
    },
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    },
};

登录后复制

.prettierrc.js 示例:

module.exports = {
    semi: false,
    singleQuote: true,
    trailingComma: 'all',
    printWidth: 100,
};

登录后复制

配置VSCode: 打开VSCode设置 (File -> Preferences -> Settings)，搜索 "Format On Save"，勾选 "Editor: Format On Save"。这样，每次保存文件时，Prettier会自动格式化代码。

运行项目:
- 在项目目录下，运行
```
npm run serve
```
  登录后复制
  (或
```
yarn serve
```
  登录后复制
  /
```
pnpm run serve
```
  登录后复制
  )。
- 在浏览器中打开命令行中显示的地址 (通常是
```
http://localhost:8080
```
  登录后复制
  )，即可看到Vue.js项目的默认页面。