vue脚手架写法

更新日期: 2020-01-19阅读: 2.4k标签: 脚手架

一直想建一个自己公司自用的脚手架,可以方便的快速开发。于是开始看vue-cli的源码和一些网上的教程。发现,一款脚手架其实很简单,主要原理就是从远程下载一个模板来新建一个项目。同时提供了一系列的交互来动态的更改模板。
下面先将建立一款脚手架可能用到插件及其使用方法列出:


1、commander

用来编写指令和处理命令行
安装commander:
npm install commander --save

主要api解析

(1)version

作用:定义版本号
用法:.version('0.0.1', '-v --version')
参数解析:

  • 版本号(必须)
  • 自定义标志(可省略):默认为-V和--version

(2)option

作用:定义命令选项
用法:.option('-n --name<path>', 'name description', 'default name')
参数解析:

  • 自定义标志<必须>:分为长短标识,中间用逗号、竖线或者空格分割;标志后面可跟必须参数或可选参数,前者用 <> 包含,后者用 [] 包含
  • 选项描述<可省略>:在使用 --help 命令时显示标志描述
  • 默认值<可省略>

例子:

program
  .version('0.1.0', '-v, --version')
  .option('-i, --init', 'init something')
  .option('-g, --generate', 'generate something')
  .option('-r, --remove', 'remove something');

(3)command

作用:添加命令名称
用法:.command('rmdir <dir> [otherDirs...]', 'install description', opts)
参数解析:

  • 命令名称<必须>:命令后面可跟用 <> 或 [] 包含的参数;命令的最后一个参数可以是可变的,像实例中那样在数组后面加入 ... 标志;在命令后面传入的参数会被传入到 action 的回调函数以及 program.args 数组中
  • 命令描述<可省略>:如果存在,且没有显示调用action(fn),就会启动子命令程序,否则会报错
  • 配置选项<可省略>:可配置noHelp、isDefault等

(4)description

作用:定义命令的描述
用法:.description('rmdir desc')

(5)action

作用:定义命令的回调函数
用法:.action(fn)

(6)parse

作用:解析process.argv,设置options以及触发commands
用法:.parse(process.argv)

(7)on
作用:自定义监听事件
用法:.on('name', fn)
例子:

// 必须在.parse()之前,因为node的emit()是即时的
program.on('--help', function(){
 console.log('  Examples:');
  console.log('');
  console.log('    this is an example');
  console.log('');
});
program.on('option:verbose', function(){
  process.env.VERBOSE = this.verbose;
})

//error on unkown commands
program.on('command:*', function(){
  console.error('Invalid command: %s\nSee --help for a list of available commands.', program.args.join(' '))
  process.exit(1);
})

综合用法示例

// 引入依赖
var program = require('commander');
 
// 定义版本和参数选项
program
  .version('0.1.0', '-v, --version')
  .option('-i, --init', 'init something')
  .option('-g, --generate', 'generate something')
  .option('-r, --remove', 'remove something');
 
// 必须在.parse()之前,因为node的emit()是即时的
program.on('--help', function(){
 console.log('  Examples:');
  console.log('');
  console.log('    this is an example');
  console.log('');
});
 
program.parse(process.argv);
 
if(program.init) {
  console.log('init something')
}
 
if(program.generate) {
  console.log('generate something')
}
 
if(program.remove) {
  console.log('remove something')
}
var program = require('commander')
program
  .version('0.1.1')
  .command('rmdir <dir> [otherDirs...]')
  .action(function(dir, otherDirs){
    console.log('rmdir %s', dir)
    if(otherDirs){
        otherDirs.forEach(function(oDir){
          console.log('rmdir %s', oDir)
        })
    }
  })
  
program.parse(process.argv)

执行 node index.js rmdir ./test aaa


2、inquirer

用来进行交互式命令行
安装:npm install inquirer --save
语法结构:

const inquirer = require('inquirer');

const promptList = [
    // 具体交互内容
];

inquirer.prompt(promptList).then(answers => {
    console.log(answers); // 返回的结果
})

基本api
type:表示提问的类型,包括:input, confirm, list, rawlist, expand, checkbox, password, editor;
name: 存储当前问题回答的变量;
message:问题的描述;
default:默认值;
choices:列表选项,在某些type下可用,并且包含一个分隔符(separator);
validate:对用户的回答进行校验;
filter:对用户的回答进行过滤处理,返回处理后的值;
transformer:对用户回答的显示效果进行处理(如:修改回答的字体或背景颜色),但不会影响最终的答案的内容;
when:根据前面问题的回答,判断当前问题是否需要被回答;
pageSize:修改某些type类型下的渲染行数;
prefix:修改message默认前缀;
suffix:修改message默认后缀。

使用示例

var inquirer = require('inquirer');
const promptList = [{
    type: 'input',
    message: '设置一个用户名',
    name: 'name',
    default: 'test_user'
},{
    type: 'input',
    message: '请输入手机号',
    name: 'phone',
    /*validate: function(val){
        if(val.match(/\d{11}/g)){
            //return val
        }
        return "请输入11位数字"
    }*/
},{
    type: 'confirm',
    message: '是否启用监听',
    name: 'watch',
    prefix: '前缀',
    suffix: '后缀',
    when: function(answers){
        //当watch为true时,开始提问
        return answers.watch
    }
},{
    type: 'list',
    message: '请选择一种水果',
    name: 'fruit',
    choices:[
        "Apple",
        "Pear",
        "Banana"
    ], 
    filter: function(val){
        //将回答变为小写
        return val.toLowerCase()
    }
}]

inquirer.prompt(promptList).then(answers => {
    // 回调函数,answers 就是用户输入的内容,是个对象
    console.log(answers)
})


3、chalk

设置控制台输出内容的样式
使用示例

const chalk = require('chalk')
//控制颜色
console.log(chalk.green('success'))
console.log(chalk.blue.bgRed.bold('Hello world'))
console.log(chalk.underline.bgBlue('lala'))

ora

提供一个加载中效果
使用示例

const ora = require('ora')
//出现加载效果
let spinner = ora('downloading template')
spinner.start()
//加载失败效果
spinner.fail()
//结束加载效果
spinner.succeed()

download-git-repo

下载远程模板:支持github、gitlab等
使用语法:

const download = require('download-git-repo')
download(repository, destination, options, callback)

repository为远程仓库地址,destination为下载的文件路径,默认当前目录,options时一些选项,比如clone:boolean表示用http下载还是git clone的形式下载


链接: https://fly63.com/article/detial/7496

使用 Node.js 开发简单的脚手架工具

像我们熟悉的 vue-cli,react-native-cli 等脚手架,只需要输入简单的命令 vue init webpack project,即可快速帮我们生成一个初始项目。在实际工作中,我们可以定制一个属于自己的脚手架,来提高自己的工作效率。

nodejs脚手架express-generator

安装生成器npm install express-generator -g,创建名称为APP的应用,在浏览器中使用 localhost:3000访问。注:该模板默认用的是 .jade 文件作为模板渲染 若要使用 ejs 可按照一下方法配置

如何快速开发一个自己的项目脚手架?

本文通过一个简单的例子来告诉大家如何使用 Yeoman 快速创建脚手架。要了解更多 yeoman-generator 的开发与使用,可以参考社区里大家写的各类 generator。目前在 npm 上有超过 8000 个 yeoman-generator,也许就会有你的菜。

前端脚手架构建实践

在前端工程化过程中,为了解决多项目中,相似度高的工作,便诞生许多前端脚手架,这里记录下自己实现一个简易前端脚手架过程的实践。主要是解决多个页面相似内容的复制粘贴问题

如何撸一个前端脚手架

vue-cli, create-react-app、react-native-cli 等都是非常优秀的脚手架,通过脚手架,我们可以快速初始化一个项目,无需自己从零开始一步步配置,有效提升开发体验。尽管这些脚手架非常优秀,但是未必是符合我们的实际应用的

手把手教你搭建脚手架工具 - (commander)

commander在Vue-cli、creat-app(react)中都起到了很大的作用,这种创建脚手架的方式与vue-cli的方式不同,vue-cli则是使用git远程拉取项目再完成初始化,这样一来要比这种更加的方便灵活,每次模板变更不需要再次上传包

前端脚手架的那些事儿

NodeJs的出现,让前端工程化的理念不断深入,正在向正规军靠近。先是带来了Gulp、Webpack等强大的构建工具,随后又出现了vue-cli和create-react-app等完善的脚手架,提供了完整的项目架构

前端使用脚手架的作用

脚手架在前端工作流中负责项目起始阶段创建初始文件。与其他功能模块不同的是,脚手架是一个完全“启下”的模块,它没有任何前置依赖。创建完成项目初始文件之后,脚手架就再无用武之地了。

别在js中写后台地址了,用好React/Vue脚手架的环境变量

前端开发都少不了对后台的调用,后台地址配置在哪里,是一个很纠结的问题 为此大家开动脑筋,想了不少办法:

基于vue脚手架构建库并发布到npm

构建库的常见方法有两种:一种是自己手动构建webpack库打包,设置output为 library; 另一种是基于vue-cli3输出库资源包。我们采用第二种vue脚手架的方式构建库。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!