前言

创新互联专注于绵竹企业网站建设,响应式网站设计,成都做商城网站。绵竹网站建设公司,为绵竹等地区提供建站服务。全流程按需设计，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务

前端日常开发中，会遇见各种各样的 cli，使用 vue 技术栈的你一定用过 @vue/cli ,同样使用 react 技术栈的人也一定知道 create-react-app 。利用这些工具能够实现一行命令生成我们想要的代码模版，极大地方便了我们的日常开发，让计算机自己去干繁琐的工作，而我们，就可以节省出大量的时间用于学习、交流、开发。

cli 工具的作用在于它能够将我们开发过程中经常需要重复做的事情利用一行代码来解决，比如我们在写需求的时候每新增一个页面就需要相应的增加该页面的初始化代码，而相同文件类型的初始化代码往往是一样的，比如 example.vue。同时我们还需要增加对应的路由，比如在 router.js 中增加对应的路由规则。这些工作都是很繁琐又重复的，每次遇到这种情况都重复一遍吗？是时候作出改变了，编写自己的 cli 工具，一行命令，3 秒钟进入 coding 状态！

本文以自己的 fc-vue-cli 为例，将开发到发布过程完整记录下来，看完本文，你将学会如何从零开发一个 cli 项目，以及如何使用 npm 发布自己的包。

提前放上该项目地址

源代码地址： 源代码

npm 地址： npm

原文地址（github上）：

github

要实现的功能

fc-vue add-page
通过这行命令来新增一个页面的模版文件，省去了手动新建文件，手动复制初始化代码的麻烦，同时添加上对应的路由配置

脚手架的名字定为 fc-vue,这个是通过 package.json 里面的 name 字段来定义的。

目录结构

 

入口 (bin/index.js)

入口文件只做了一件事，那就是判断当前node的版本是否大于10，如果版本号<10则提醒用户升级node

#!/usr/bin/env node

// 'use strict';
const chalk = require('chalk');

const currentNodeVersion = process.versions.node;
const major = currentNodeVersion.split('.')[0];
if (major < 10) {
 console.error(
 chalk.red(
  `You are running Node \n${currentNodeVersion} \nvue-assist-cli requires Node 10 or higher.\nPlease update your version of Node`
 )
 );
 process.exit(1);
}

require('../packages/init');

当前文章：手把手带你搭建一个nodecli的方法示例-创新互联
地址分享：http://scyanting.com/article/dhsiho.html