问题

在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 namecat > "src/components/${name}.vue" <<EOF
<template><div class="${name,}"><!-- 内容 --></div>
</template><script>
export default {name: '${name}'
}
</script><style scoped>
.${name,} {}
</style>
EOFecho "Component ${name}.vue created!"

运行：

npm run new:component

---

方法 4：在线工具生成

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

---

不同场景推荐方案

场景	推荐方案	优点
少量组件	IDE 模板	无需配置，即开即用
大型项目	plop.js	支持批量生成，统一代码风格
团队协作	共享代码片段/Snippet	确保团队规范一致
需要高度自定义	自定义 Shell/Python 脚本	灵活控制生成逻辑

---

附：标准 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>