2020-03-17 使用yoeman创建一个脚手架

yoeman创建一个脚手架

1. 创建一个自己的模版工程，不要有node_modules文件夹

2. 全局安装yo npm i -g yo

3. 全局安装yoeman的脚手架工具npm i -g generator-generator

4. 进入模版工程目录下运行yo generator按照提示一步一步的走下去

   

   注意: 脚手架名字必须是generator-打头的

5. 创建成功后会在目录下生成一个generator-vue文件夹

   文件夹的目录结构是这样的
   

6. cd generators/app/templates删除文件夹里的所有文件，然后将我们自己的模版工程拷贝进去

7. vim ../index.js将下列内容拷贝进去

   'use strict';
   const Generator = require('yeoman-generator');
   const chalk = require('chalk');
   const yosay = require('yosay');
   
   module.exports = class extends Generator {
     prompting() {
       // Have Yeoman greet the user.
       this.log(
         yosay(`Welcome to the sensational ${chalk.red('generator-vues')} generator!`)
       );
   
       const prompts = [
         {
           type: 'confirm',
           name: 'install',
           message: 'Would you like to enable this option?',
           default: true
         }
       ];
   
       return this.prompt(prompts).then(props => {
         // To access props later use this.props.someAnswer;
         this.props = props;
       });
     }
   
     writing() {
       this.fs.copy(
         this.templatePath('**'), // 复制template下的所有文件
         this.destinationPath('./')
       );
     }
   
     install() {
       this.installDependencies({
         bower: false
       });
     }
   };
   

   上面的代码用到了yoeman的生命周期钩子

8. 到脚手架根目录使用npm link命令，将我们脚手架所需的npm依赖包链接到全局

   

9. 使用脚手架,到我们的需要安装的目录直接运行yo vues就可以安装目录啦

• yo 后面跟的安装名字就是generator-vues，其中generator可以省略掉

10. 执行可能会报错

    Error: spawn bower ENOENT
        at Process.ChildProcess._handle.onexit (internal/child_process.js:240:19)
        at onErrorNT (internal/child_process.js:415:16)
        at process._tickCallback (internal/process/next_tick.js:63:19)
    

    可能就是因为上面的index.js不是复制的,在hooks里禁用bower安装就可以啦

    this.installDependencies({
      bower: false
    })
    

11. 成功安装的界面

在执行以下我们的运行命令
项目成功的跑起来啦

下一期介绍一下如何将我们的脚手架发布到npm上

本文地址：https://blog.csdn.net/hzisw/article/details/107402021