如何写一个命令行工具：NPM自动生成VUE组件模板

如何写⼀个命令⾏⼯具：NPM⾃动⽣成VUE组件模板这是我很久以前写的⽂章，如果有什么不对的地⽅请指出，原⽂：
命令⾏⼯具，即 Cli(command-line interface)。

是在图形⽤户界⾯得到普及之前使⽤最为⼴泛的⽤户界⾯，它通常不⽀持⿏标，⽤户通过键盘输⼊指令，计算机接收到指令后，予以执⾏。

1 介绍
使⽤vue组件模板开发的项⽬每次新建组件的时候，都需要新增.vue⽂件，在这个⽂件当中写⼊template、script、style这些内容，并且每个⼈命名风格不统⼀，造成了很多烦恼。

本⽂就是通过node来帮助我们写⼀个命令⾏⼯具，⾃动去执⾏这些重复性⼯作，并保持同⼀种风格：
项⽬地址：，欢迎。

有什么问题或者建议可以在提问
2 创建新项⽬
$ mkdir vue-style-cli
$ cd vue-style-cli
$ npm init
最后我们会得到⼀个vue-style-cli⽂件夹，并在vue-style-cli⽂件夹初始化了⼀个package.json⽂件。

新建可执⾏⽂件
我们在vue-style-cli⽂件夹下新建index.js⽂件，并在⽂件头部加上以下代码：
#!/usr/bin/env node
最后，制定index.js⽂件为此项⽬的可执⾏⽂件，在package.json⽂件中加⼊：
"bin": {
"vs": "index.js"
},
3 开发调试
我们全局安装⼀个cli包过后，可以全局调⽤这个命令⾏⼯具。

那我们开发的时候怎么调⽤呢？答案很简单，使⽤npm link命令。

在npm包下执⾏npm link，会创建⼀个连接符号，连接全局⽂件夹。

这样就能进⾏开发调试了。

官⽅⽂档：
4 命令⾏辅助⼯具
在写命令⾏⼯具的时候，会使⽤⼀些辅助⼯具让我们的开发更⾼效。

以下是本项⽬使⽤的⼀些辅助⼯具：
：帮助参数解析
：命令⾏输出⾃定义颜⾊
当然还有其他⽐较有效的辅助⼯具：
：常见交互式命令⾏
：命令⾏动画效果
：下载并提取 git 仓库
：可以在终端上显⽰出 √ 或 × 等的图标。

5 vue-style-cli主要代码逻辑
5.1 命令⾏主要代码
program
.command('create <name>')
.description('create a vue component with directory')
.alias('c')
.option('-p, --path [path]', 'real path; Please use relative paths')
.option('-o,--only', 'create only component without directory')
.option('-s,--scoped', 'Scoped CSS')
.option('-l, --lang [lang]', 'CSS Modules')
.action((name, cmd) => {
try {
cmd.only
generateOnlyComponent(
name,
getRealPath(cmd.path),
ng,
cmd.scoped,
)
: generateComponent(name, getRealPath(cmd.path), ng, cmd.scoped);
} catch (e) {
console.log(e);
}
});
主要就只有⼀个create命令，带有⼀些option参数可选择：
--path：⽂件创建地址(相对地址)，没有则在当前命令执⾏⽂件夹下创建
--only：是否只创建单独的`.vue`组件，默认创建带有⽂件夹风格
--scoped：`.vue`组件中CSS作⽤域
--lang：`.vue`组件中CSS模块，默认没有
例⼦：
e:\demo>vs c vsDemo -p ./src/views
在E:\demo⽬录下执⾏vs c vsDemo -p ./src/views 命令，最终会在E:\demo\src\views下⽣成vs-demo⽂件夹，vs-demo⽂件夹⾥⾯含有index.js和vs-demo.vue两个⽂件5.2 ⽂件⽣成代码
generateOnlyComponent：⽣成单独的.vue⽂件
generateComponent：⽣成含有⽂件夹格式的.vue⽂件
这⾥主要介绍generateComponent，因为本质上generateComponent与generateOnlyComponent逻辑差不多
5.2.1 使⽤mkdirp与tpl_apply
本作者为了快速开发(图⽅便)，使⽤了mkdirp与tpl_apply这两个库进⾏⽂件夹和⽂件的⽣成。

：⽣成⽂件夹
：基于实现⽂件写⼊
5.2.2 代码逻辑
1、检查当前路径下是否存在此⽂件夹，若存在，报错，否则进⾏下⼀步
let exists = false;
try {
fs.accessSync(filePath);
exists = true;
} catch (error) {}
if (exists) {
message.error(`Unable to create: ${filePath} folder already exists`);
return resolve();
}
2、在当前路径下创建⽂件夹，并在此⽂件夹下新增.js和.vue⽂件
// 创建⽂件夹
mkdirp(filePath, err => {
if (err) {
console.error(err);
return resolve();
}
const data = {
kebabCaseName: name,
camelCaseName: firstUpperCase(getCamelCase(name)), lang,
scoped: scoped ? ' scoped' : '',
};
const tplPath = path.join(__dirname, '../templates');
const tpls = [
{ source: 'vue.tpl', dest: `${name}.vue` },
{ source: 'index.tpl', dest: 'index.js' },
];
tpls.forEach(({ source, dest }) => {
tplApply.tpl_apply(
path.join(tplPath, source),
data,
path.join(filePath, dest),
);
});
message.success(`generate ${filePath} success`);
resolve();
});
3、模板⽂件
vue.tpl
<template>
<div class="{{kebabCaseName}}"></div>
</template>
<script>
export default {
name: "{{kebabCaseName}}"
};
</script>
<style{{#if lang}} lang="{{lang}}"{{/if}}{{scoped}}>
</style>
index.tpl
import {{camelCaseName}} from './{{kebabCaseName}}'; export default {{camelCaseName}};
6 发布
发布包到npm⾮常简单，只需要⼀条命令：
npm publish
详细可见：
本⽂完，感谢阅读。