当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 2020-03-17 使用yoeman创建一个脚手架

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

2020年07月18日  | 移动技术网IT编程  | 我要评论

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的生命周期钩子

在这里插入图片描述

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

    在这里插入图片描述

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

在这里插入图片描述

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

  1. 执行可能会报错

    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
})

  2. 成功安装的界面

在这里插入图片描述

在执行以下我们的运行命令在这里插入图片描述
项目成功的跑起来啦

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

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网