VSCode创建Vue项目全攻略：快捷键、插件与Vite实战

手把手教你在VSCode里秒建Vue项目：快捷键、插件与完整实操

先回答一个被问烂了的问题：VSCode里创建Vue项目到底有没有快捷键？严格来说，官方没有提供"一键生成Vue项目"的组合键，但通过组合使用"终端命令+快捷键+自定义代码片段"，完全可以把从输入命令到项目跑起来的耗时压到一分钟以内。我这几年用VSCode写Vue项目，从Vue 2的CLI时代一路用到Vue 3的Vite时代，积累了一套固定的操作流。这篇就把环境准备、脚手架选型、插件配置、快捷键体系和避坑经验一次说透，不管你是刚入门还是已经写了几年前端，都能在这篇文章里找到能立刻用上的东西。

这篇文章适合两类人：一类是刚接触Vue，想在VSCode里尽快把项目跑起来的新手；另一类是已经在写Vue，但总觉得自己的操作流不够顺，想把手速再提一档的老手。文章不会停留在"按哪个键"的层面，更重要的是讲清楚为什么这样配、这样按，遇到问题怎么排查。

1. 环境准备：项目创建前的三件套检查

1.1 Node.js版本怎么选才顺手

创建Vue项目之前，Node.js是绕不开的基础环境。很多人栽在第一步，就是Node版本不对。Vue 3官方推荐的Vite脚手架要求Node.js版本至少是16.0，而2024年以后新发布的Vite 5进一步把要求提到了18.0。也就是说，你本地如果还停在Node 14，安装依赖的时候会直接报错。

判断自己当前版本的方法很简单，在终端里执行：

node -v npm -v

如果版本偏低，我建议直接用nvm（Node Version Manager）来做版本管理。为什么？因为不同项目可能依赖不同版本的Node，比如老项目用Vue CLI可能需要Node 14，新项目用Vite则需要Node 18，用nvm可以随时切换，不用频繁重装。以macOS为例，安装nvm：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Windows用户建议直接去官网下载nvm-windows的安装包，安装完后在管理员身份的PowerShell里用nvm install 18和nvm use 18来安装切换。

注意：装完nvm后终端可能提示command not found，这时需要重启终端，或者手动执行source ~/.bashrc（Linux/macOS）刷新环境变量。

1.2 VSCode必装插件清单与配置理由

VSCode本身只是一个编辑器，真正让它变成Vue开发利器的是插件生态。我推荐以下插件，按重要性排序：

装完插件后，有几个基础设置建议改一下。打开设置界面（Ctrl + ,或Cmd + ,），搜索format on save，把保存时格式化打开；再搜索auto save，建议设置为onFocusChange，这样光标离开一个文件就自动保存，配合格式化和ESLint修复，效率提升非常明显。

1.3 验证环境能不能用的快速测试法

很多新手装完环境就急着创建项目，结果运行时各种报错。我习惯先做一次快速自检。在终端中依次执行：

node --version npm --version

接着检查VSCode是否能在集成终端中执行npm命令。可以打开VSCode，按Ctrl + `` 唤出终端，直接输入npm -v，如果提示找不到命令，多半是VSCode没有继承系统环境变量。Windows用户在系统设置里检查Path，macOS用户检查~/.zshrc`配置。这一步没问题，后面的创建流程就会非常顺畅。

2. 快速创建Vue项目：三种方式对比与选型

2.1 Vite脚手架：2024年最推荐的创建方式

Vite是Vue作者尤雨溪团队维护的构建工具，Vue 3官方已经推荐使用Vite创建新项目。它最大的特点就是"快"，冷启动几百毫秒，热更新几乎无感知。

创建Vue 3 + TypeScript项目的命令如下：

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

逐段拆解一下这条命令的含义：

• npm create：npm 7以上版本的固定语法，是npm init的别名。
• vite@latest：指定使用Vite脚手架的最新版本。
• my-vue-app：项目文件夹名称，可以按需修改。
• --：后面的参数原样传给脚手架工具，不加这个可能被npm吞掉参数。
• --template vue-ts：指定使用Vue 3 + TypeScript模板。如果要用纯JavaScript，把vue-ts换成vue即可。

命令执行后会生成一个标准的Vite项目结构。进入项目并安装依赖：

cd my-vue-app npm install npm run dev

默认端口是5173，浏览器打开http://localhost:5173就能看到项目页面。

注意：Vite 5要求Node 18+，如果你的Node版本不够，创建过程可能不会报错，但npm install时会遇到ERR_OSSL_EVP_UNSUPPORTED等错误。这类问题在第五章会详细讲排查方法。

2.2 Vue CLI方式：还在用Vue 2的话得了解

Vue CLI是Vue 2时代的主流脚手架，目前官方已经进入维护模式，如果不是维护老项目，我不建议新项目再用CLI。但如果你所在团队还在用Vue 2，CLI还是必须掌握的。

全局安装Vue CLI：

npm install -g @vue/cli

创建项目的命令：

vue create my-vue-app

执行后会进入交互式选择界面，有Default (Vue 3),Default (Vue 2),Manually select features三个选项。选第三个可以手动勾选Router、Vuex/Pinia、ESLint等。项目创建完成后，进入目录，运行：

npm run serve

默认端口是8080。Vue CLI比Vite慢很多，原因在于它使用Webpack做打包，冷启动需要做完整的依赖分析。Vite利用了浏览器原生ES Module能力，开发时不需要打包，所以速度差异明显。

2.3 手动创建最小项目：理解原理的必经之路

如果你想彻底搞懂Vue项目每一层是怎么搭起来的，我力荐手动创建一次最小项目。这个过程虽然麻烦，但做完之后你对Vite、Vue组件、入口文件的理解会完全不一样。

手动创建一个最简项目只需要5个文件：

my-min-vue/ ├── index.html # 页面入口 ├── package.json # 项目信息与依赖 ├── vite.config.js # Vite配置文件 └── src/ ├── main.js # 应用入口 ├── App.vue # 根组件

package.json内容：

{ "name": "my-min-vue", "version": "1.0.0", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "vue": "^3.4.0" }, "devDependencies": { "@vitejs/plugin-vue": "^5.0.0", "vite": "^5.0.0" } }

vite.config.js内容，必须加上Vue插件：

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], })

index.html内容：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>最小Vue项目</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body> </html>

src/main.js：

import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app')

src/App.vue：

<template> <div class="container"> <h1>Hello Vue 3</h1> </div> </template> <script setup> </script> <style scoped> .container { text-align: center; margin-top: 40px; } </style>

然后在项目根目录执行：

npm install npm run dev

手动搭过一遍之后，你再看Vite自动生成的脚手架，会发现每多出来的文件都有它的作用，不会再觉得项目结构是个黑盒。

3. 快捷键与代码片段：把VSCode操作流拉到最快

3.1 终端与命令面板：创建项目的快捷键底层逻辑

VSCode里Ctrl + Shift + P（Windows/Linux）或Cmd + Shift + P（macOS）打开命令面板，另一个常用快捷键是Ctrl + P，用于快速打开文件。这两个键组合起来可以覆盖绝大多数操作场景。

在创建Vue项目的场景下，实际高频快捷键是：

Ctrl + ` 打开/关闭集成终端 Ctrl + Shift + ` 新建一个终端实例 Ctrl + Shift + 5 将终端分屏（多开终端特别有用）

我自己习惯的创建项目流程是：

1. 在VSCode中打开准备存放项目的文件夹（Ctrl + K，再按Ctrl + O，或者直接Ctrl + O打开文件夹）。
2. 按`Ctrl + ``调出终端。
3. 输入npm create vite@latest my-app -- --template vue-ts。
4. 按Enter确认，脚手架生成完后输入cd my-app。
5. 再输入npm install，等待依赖安装。
6. 输入npm run dev启动开发服务器。
7. 同时按Ctrl + Shift + 5把终端分屏，一个窗口跑开发服务，另一个窗口敲Git命令或装其他依赖。

这套操作熟练之后，全程不到两分钟。没有快捷键的参与，每一步都要用鼠标点，体感完全不一样。

3.2 文件与代码编辑：Vue模板里最常用的几组快捷键

项目创建好以后，真正耗时的还是日常写代码。VSCode的这组快捷键，我在写Vue组件时使用频率最高：

以Ctrl + D为例，Vue模板里你想把一个类名从container改成wrapper，正常做法是逐个手动删改。用Ctrl + D选中第一个container之后，每按一次就会选中下一个，配合直接输入新内容，所有选中处一起变化。这个快捷键在改props传递的参数名时简直救命。

3.3 自定义代码片段：一键生成Vue模板的骚操作

如果问"VSCode中创建Vue快捷键"最贴近字面含义的答案，那就是自定义代码片段。它允许你输入几个字母，然后回车展开成一大段代码。

操作路径：Ctrl + Shift + P→ 输入snippets→ 选择配置用户代码片段→ 选择或新建一个全局片段文件（比如vue.code-snippets），或者在Vue项目里配置Config snippets。

我分享一套我自己的Vue 3片段配置，放在vite或vue后缀的代码片段文件里：

{ "Vue3 Single File Component": { "scope": "vue", "prefix": "v3", "body": [ "<template>", " <div class=\"$1\">", " $2", " </div>", "</template>", "", "<script setup>", "import { ref, computed } from 'vue'", "", "const $1 = ref($3)", "", "</script>", "", "<style scoped lang=\"scss\">", ".$1 {", " $4", "}", "</style>" ], "description": "生成Vue3单文件组件基本模板" }, "Vue3 Script Setup With Props": { "scope": "vue", "prefix": "vprops", "body": [ "<script setup>", "const props = defineProps({", " $1: {", " type: String,", " default: ''", " }", "})", "</script>" ], "description": "生成带props的script setup" } }

配置完成后，新建一个.vue文件，输入v3回车，几秒内就生成一个包含模板、脚本、样式的完整组件骨架。在新建组件文件前，我建议配合VSCode的"新建文件"快捷键使用：Ctrl + N新建空白文件，然后Ctrl + S保存时输入完整文件名，执行保存后右下角会提示选择语言模式，如果Volar插件装好了，.vue文件会自动识别。

提示：代码片段中的$1、$2是Tab跳转位置。回车展开代码片段后，按Tab依次跳到$1,$2等位置，方便填充内容。善用这个机制，可以把"填写参数"的步骤也加速。

3.4 配置自己的快捷键绑定

如果你觉得某个操作没有默认快捷键，可以自己绑定。方法是：Ctrl + Shift + P→ 输入keyboard shortcuts→ 打开键盘快捷方式设置面板。这里可以看到所有命令的当前绑定，双击某个命令即可修改快捷键。

一个我经常用的自定义绑定例子：把"运行开发服务器"关联到快捷键。虽然这不改变VSCode本身行为，但可以配合"任务"功能实现一键启动。先配置.vscode/tasks.json：

{ "version": "2.0.0", "tasks": [ { "label": "dev", "type": "npm", "script": "dev", "group": { "kind": "build", "isDefault": true }, "problemMatcher": [] } ] }

然后在键盘快捷方式里搜索workbench.action.tasks.run，绑定实际顺手的键，比如Ctrl + R。之后在VSCode里按Ctrl + R就会弹任务列表，选dev就能启动项目，不用每次切到终端敲命令。

4. 完整实操：从零创建Vue 3项目并跑通

4.1 一步一步创建全新的Vue 3 + TypeScript项目

这一节给你一套可以照抄的完整流程。假设你的Node.js环境已经按第一章的内容准备好了。

打开VSCode，按`Ctrl + ``打开集成终端，输入命令创建项目：

npm create vite@latest vue3-ts-app -- --template vue-ts

执行后终端会输出Done. Now run:这样的提示，依次执行：

cd vue3-ts-app npm install npm run dev

看到VITE v5.4.x ready这样的输出，说明开发服务器已经拉起。浏览器访问http://localhost:5173，会看到Vue + Vite的官方默认欢迎页。到这一步，你的项目已经创建成功并跑起来了。

4.2 安装路由、状态管理和样式库

一个生产级项目通常需要路由和状态管理。Vue 3生态中对应的是Vue Router 4和Pinia。在终端中执行安装命令：

npm install vue-router@4 pinia

装完之后，在src目录下创建router/index.ts文件：

import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', name: 'home', component: HomeView, }, ], }) export default router

在src/main.ts中注册：

import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' import router from './router' const app = createApp(App) app.use(createPinia()) app.use(router) app.mount('#app')

如果你需要在项目里使用UI组件库，这里选择很多。熟悉React的用Ant Design Vue，偏移动端的可以用Vant，桌面端后台管理我一般用Element Plus：

npm install element-plus

在main.ts里全局引入：

import ElementPlus from 'element-plus' import 'element-plus/dist/index.css'

4.3 在VSCode中运行的注意事项

npm run dev跑起来之后，我强烈建议不要直接在终端里看日志，而是在VSCode里给项目配置调试和"问题"面板的组合使用。

首先，安装Volar后，.vue文件会被正确识别。你可以给项目添加一个.vscode/extensions.json文件：

{ "recommendations": [ "vue.volar", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode" ] }

这样任何人在团队项目里用VSCode打开时，都会收到插件推荐，减少因为插件缺失导致的奇怪问题。其次，"问题"面板（Ctrl + Shift + M）会显示ESLint和TypeScript的报错，保存后格式化会让大部分纯风格问题自动消失。我通常的检查顺序是：

1. 终端看npm run dev有没有报编译错误。
2. Ctrl + Shift + M看编辑器收集到的问题。
3. 浏览器控制台看运行时错误。

三层排查下来，绝大多数问题都能定位。

4.4 设置代码规范和保存自动修复

很多人写Vue的时候被ESLint的红色波浪线烦得不行。解决方式是在项目根目录配置eslint.config.js（ESLint 9之后是扁平配置）：

import js from '@eslint/js' import vue from 'eslint-plugin-vue' import tseslint from 'typescript-eslint' export default tseslint.config( { ignores: ['dist'] }, { files: ['**/*.{ts,vue}'], extends: [ js.configs.recommended, ...tseslint.configs.recommended, ...vue.configs['flat/recommended'], ], rules: { 'vue/multi-word-component-names': 'off', }, } )

配合VSCode的format on save和ESLint插件，保存时会自动执行eslint --fix。我建议在.vscode/settings.json里加上：

{ "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "eslint.validate": ["vue", "javascript", "typescript"], "eslint.codeActionsOnSave": { "source.fixAll": "explicit" } }

这样写完代码按Ctrl + S一键搞定格式和规范修复，不用在"代码能跑但全是波浪线"的状态里内耗。

5. 常见问题与排查技巧实测

5.1 提示"command not found"或依赖安装报错

创建项目时最常遇到的报错有两类。第一类是npm create执行后提示command not found。这种情况通常出现在用户使用了旧版npm。解决办法是更新npm：

npm install -g npm@latest

第二类是npm install时报ERR! code 1之类的大段红色错误。看到这种问题我先教你一个快速判断方向的方法：先在终端里执行node -v和npm -v，如果npm比Node版本旧很多，优先考虑Node和npm版本不匹配。解决办法是用nvm切换Node版本，或者卸载重装LTS版Node。另一个高频原因是网络问题，国内用户建议把npm镜像切换到淘宝源：

npm config set registry https://registry.npmmirror.com

设置完再执行npm install，速度通常有明显提升。如果卡在某个包装不上，可以先执行npm cache clean --force再重试。

5.2 端口被占用导致dev server起不来

启动Vite时偶尔会看到Port 5173 is already in use的提示。Vite默认会自动切换到下一个可用端口，也就是5174、5175……，所以很多时候并不需要处理。但如果你希望固定端口，可以在vite.config.ts里显式配置：

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], server: { port: 5173, strictPort: true, }, })

strictPort: true表示如果端口被占用就直接报错，而不是自动换端口。配合这个配置，排查端口占用问题时可以先找到占用进程。Windows下在终端执行：

netstat -ano | findstr :5173

然后根据PID结束进程：

taskkill /PID <PID> /F

macOS下：

lsof -i :5173 kill -9 <PID>

5.3 快捷键冲突与插件遮挡

实际开发中，VSCode快捷键最常见的坑不是"按了没反应"，而是"按了却触发了别的功能"。比如Ctrl + D在某些输入法里与"剪切板历史"冲突；Ctrl + Space这个默认的触发建议快捷键，会跟中英文输入法切换冲突，导致代码补全失灵。

解决办法是在键盘快捷方式面板（Ctrl + Shift + P→keyboard shortcuts）里搜索triggerSuggest，修改默认绑定。我自己改成了Alt + /，用顺手之后再也没冲突过。类似的，Ctrl + Shift + I在某些浏览器远程调试场景中会与开发者工具冲突，如果遇到，同样在这个面板里重新绑定。

另外，插件之间也可能抢快捷键。比如装了Vim插件后，几乎所有按键都会被Vim接管，写Vue的时候容易误触。遇到这种情况不需要卸载插件，可以在插件设置里关闭Vim模式，或者用Ctrl + Shift + P输入toggle vim mode临时切换。

5.4 组件模板补全不生效

Volar装好之后，如果发现模板里输入<el-之类的组件名没有补全提示，按下Ctrl + Space也没有反应，可以按以下顺序排查：

1. 确认Volar插件已激活：看右下角状态栏是否有Vue图标。
2. 检查.vue文件关联：右键文件 →选择语言模式→ 确认是Vue。
3. 检查TS配置文件tsconfig.json里include字段是否覆盖了src目录。
4. 重启VSCode的语言服务：Ctrl + Shift + P→Vue: Restart Vue Server。

最后一步经常被忽略，但非常有效。Volar的Language Server偶尔会状态异常，重启一下基本都能恢复。

5.5 常见开发快捷键速查表

把前面提到的快捷键整理成一张速查表，建议收藏备用：

我个人用了四年的VSCode + Vue组合，最想强调的一件事是：工具链的每一个环节，从Node版本、插件、代码片段到快捷键绑定，都应该为"减少切换"服务。创建项目的最佳状态，是打开VSCode后手不离开键盘，敲完一串命令，项目就起来了。这套流程熟练之后，试错成本会低很多，你会更有底气去尝试不同的脚手架、不同的项目结构。如果你照文章的流程操作时遇到和上面不一样的报错，别急着卸载重装，先看报错信息的最后几行，通常那里已经告诉了你真正的原因。