怎样在 VS Code 中快速创建 Vue 单文件组件(SFC)的基础模板结构？

问题

在Vue项目的开发中，我们经常遇到一个问题，创建新组件时要自己输入基本的框架，比如：

<template>
  <div class="page-box">
    
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      
    }
  }
}
</script>

<style scoped>
.page-box {
  
}
</style>

那有没有办法像生成一个html文件那样在vscode里快速生成Vue组件框架呢？

实践

根据我的需要，我选择了比较简单的方案：使用 VSCode 的用户代码片段功能。

• 打开命令面板：
  • Windows/Linux: Ctrl + Shift + P
  • Mac: Cmd + Shift + P
• 输入并选择：「Snippets: Configure Snippets」
• 选择「vue」或「新建全局代码片段文件」
• 添加以下内容：

{
 "Vue 2 Component": {
   "prefix": "v2",
   "body": [
     "<template>",
     "  <div class=\"$1\">",
     "    $2",
     "  </div>",
     "</template>",
     "",
     "<script>",
     "export default {",
     "  name: '$3',",
     "  data() {",
     "    return {",
     "      $4",
     "    }",
     "  },",
     "  methods: {",
     "    $5",
     "  }",
     "}",
     "</script>",
     "",
     "<style scoped lang=\"${6:less}\">",
     ".$1 {",
     "  $7",
     "}",
     "</style>"
   ],
   "description": "Vue 2 标准组件结构"
 },
}

使用方法：在 .vue 文件中输入 v2，按 Tab 键自动补全模板。

其他方案（from DeepSeek）

以下是快速创建 Vue 组件文件的几种高效方法，适用于不同开发场景：

方法 1：使用 IDE/编辑器模板（最推荐）

VSCode 用户

1. 安装插件：

   • Vue VSCode Snippets（提供代码片段）
   • File Templates（自定义文件模板）

2. 创建模板文件：
   在项目根目录新建 .vscode/templates/vue-component.template：

   <template>
     <div class="${1:component-name}">
       ${2:<!-- 内容区 -->}
     </div>
   </template>
   
   <script>
   export default {
     name: '${3:ComponentName}',
     ${4:// 组件逻辑}
   }
   </script>
   
   <style scoped lang="${5:less}">
   .${1:component-name} {
     ${6:/* 样式 */}
   }
   </style>
   

3. 快捷键生成：
   右键 → New File from Template 选择模板

方法 2：命令行工具（适合批量创建）

使用 plop.js（自动化脚手架）

1. 安装：

   npm install -g plop
   

2. 创建 plopfile.js：

   module.exports = function (plop) {
     plop.setGenerator('component', {
       description: 'Create a Vue component',
       prompts: [{
         type: 'input',
         name: 'name',
         message: 'Component name (PascalCase):'
       }],
       actions: [{
         type: 'add',
         path: 'src/components/{{pascalCase name}}.vue',
         templateFile: 'templates/component.hbs'
       }]
     });
   }
   

3. 运行：

   plop component
   

方法 3：NPM 脚本（极简版）

在 package.json 中添加脚本：

"scripts": {
  "new:component": "bash ./scripts/new-component.sh"
}

创建 scripts/new-component.sh：

#!/bin/bash
echo "Enter component name (PascalCase):"
read name

cat > "src/components/${name}.vue" <<EOF
<template>
  <div class="${name,}">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  name: '${name}'
}
</script>

<style scoped>
.${name,} {}
</style>
EOF

echo "Component ${name}.vue created!"

运行：

npm run new:component

方法 4：在线工具生成

• Vue Component Generator（网页工具）：
  https://vue-component-generator.netlify.app/
  勾选选项后直接下载 .vue 文件

不同场景推荐方案

附：标准 Vue 3 组件模板（组合式 API）

<template>
  <div class="component-name">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World')
</script>

<style scoped>
.component-name {
  color: var(--primary-color);
}
</style>