Vue-cli是否有便捷创建组件的方法？求类似Angular CLI的快速命令

嘿，我太懂你从Angular转过来的这种需求了——习惯了ng g c的丝滑，突然要手动创建.vue文件确实有点别扭！好在Vue生态里也有不少类似Angular CLI的快捷方式，给你整理几种最实用的：

1. 使用Vue CLI插件（最接近Angular体验） #

Vue CLI本身默认没有内置组件生成命令，但有官方友好的插件可以实现这个功能：

• 首先安装插件：

  vue add component
  

• 安装完成后，你就能用和Angular几乎一样的命令生成组件了：

  # 基础用法
  vue generate component MyComponent
  # 简写版（和ng g c完全对应）
  vue g c MyComponent
  

• 还可以指定组件的存放路径，比如想把组件放到src/components/Layout目录下：

  vue g c Layout/Header
  

  插件会自动帮你创建对应的.vue文件，甚至还能按需生成配套的样式文件。

2. 自定义npm脚本（灵活可控，完全自定义） #

如果不想依赖插件，你可以自己写一个简单的脚本实现组件生成：

1. 在项目根目录创建一个generate-component.js文件，写入生成组件的逻辑：

   const fs = require('fs');
   const path = require('path');
   const componentName = process.argv[2];
   
   if (!componentName) {
     console.error('请输入组件名称！');
     process.exit(1);
   }
   
   const componentDir = path.join(__dirname, 'src/components', componentName);
   const componentContent = `<template>
     <div class="${componentName.toLowerCase()}">
       <!-- 组件内容 -->
     </div>
   </template>
   
   <script>
   export default {
     name: '${componentName}'
   }
   </script>
   
   <style scoped>
   .${componentName.toLowerCase()} {
     /* 组件样式 */
   }
   </style>`;
   
   // 创建目录和文件
   fs.mkdirSync(componentDir, { recursive: true });
   fs.writeFileSync(path.join(componentDir, `${componentName}.vue`), componentContent);
   console.log(`组件 ${componentName} 已成功创建！`);
   

2. 在package.json的scripts里添加一条命令：

   "scripts": {
     "gc": "node generate-component.js"
   }
   

3. 之后运行npm run gc MyComponent就能快速生成组件了，你还可以根据自己的需求修改脚本里的模板内容（比如添加setup语法、导入依赖等）。

3. 使用微生成器工具（高级定制化需求） #

如果你需要更灵活的模板配置（比如生成组件的同时创建测试文件、路由配置等），可以用Plop这个工具：

• 首先安装Plop：

  npm install plop --save-dev
  

• 在项目根目录创建plopfile.js，配置组件生成的模板规则：

  module.exports = function(plop) {
    plop.setGenerator('component', {
      description: '生成一个Vue组件',
      prompts: [{
        type: 'input',
        name: 'name',
        message: '请输入组件名称：'
      }],
      actions: [{
        type: 'add',
        path: 'src/components/{{name}}/{{name}}.vue',
        templateFile: 'plop-templates/component.hbs'
      }]
    });
  };
  

• 创建plop-templates/component.hbs模板文件，写入你想要的组件模板内容；
• 之后运行npx plop component，按照提示输入组件名称，就能生成完全定制化的组件了。

这样不管你是想要和Angular完全一致的命令体验，还是想要自定义生成逻辑，都能找到合适的方法～

内容的提问来源于stack exchange，提问作者user7767606