初步認識
我們在快速創(chuàng)建vue項目時，使用命令vue create hello-world，在此之前先全局安裝npm install -g @vue/cli。安裝了@vue/cli 才可以使用命令vue create, 那么，這個cli到底是什么？
CLI一般指命令行界面。命令行界面（英語：command-line interface，縮寫：CLI）是在圖形用戶界面得到普及之前使用最為廣泛的用戶界面，它通常不支持鼠標，用戶通過鍵盤輸入指令，計算機接收到指令后，予以執(zhí)行。
簡單來說，我們輸入命令，然后計算機幫我們執(zhí)行一系列固定的操作，而這些操作，是我們先前定義好的。以上面的創(chuàng)建vue項目的例子來說，我們執(zhí)行vue create hello-world, 計算機就會創(chuàng)建vue項目的模板，而這些早在@vue/cli里定義好了。
那接下來的重點當然要說說cli如何定義了？
- 創(chuàng)建一個js文件
self-cli.js(任意命名), 如果希望某個文件是作為命令被執(zhí)行的，那么只要在這個文件的開頭寫上:#!/usr/bin/env node， 這個文件什么都不做，只是打印一個“啟動啦”
#!/usr/bin/env node
console.log('啟動啦')
- 在package.json里面配置
"bin": {
"yh": "bin/self-cli.js"
},
看下我的文件目錄：
目錄
- 在項目根目錄下執(zhí)行
npm link鏈接到全局 - 測試，執(zhí)行
yh,結果如下
image.png
一個do nothing 的cli就被開發(fā)出來了，如果要創(chuàng)建有用的cli，可以借助commander
升級
修改self-cli.js如下
#!/usr/bin/env node
const program = require('commander') //命令行工具
const chalk = require('chalk') // 讓命令界面colorful
program
.command('init <name>') // 定義init命令
.description('init project')
.action((name) => {
console.log(chalk.green(`初始化${name}`))
})
program.parse(process.argv) // 同志們，這一行一定要加!!!!!
program 說明
command 創(chuàng)建命令，后面可跟參數
description 描述
action 執(zhí)行回調，即這個命令要做些什么
參考：https://github.com/tj/commander.js/blob/master/Readme_zh-CN.md
測試
image.png
如果action的邏輯很復雜，可以將它抽離成一個文件，一般將這些文件放在lib文件夾下。
好了，今天的分享就到這里了，高考生們加油！??！
