構建一個CLI腳手架

一、準備條件

npm模塊

commander： node.js 命令行接口的完整解決方案
官網地址：https://github.com/tj/commander.js/blob/master/Readme_zh-CN.md
inquirer： 用戶命令行交互
官網地址：https://github.com/SBoudrias/Inquirer.js
download-git-repo： 用於下載GitHub, GitLab, Bitbucke的文件
官網地址：https://www.npmjs.com/package/download-git-repo
chalk：改變log的文字顏色
官網地址：https://github.com/chalk/chalk
ora： 下載顯示的loading
官網地址：https://github.com/sindresorhus/ora

目前使用的版本

二、項目搭建

1. 新建文件夾，npm init -y 初始化package.json文件，並安裝以上所有依賴
2. 在項目中新建bin文件夾，用來存放命令代碼，並在bin文件夾中創建vue-template-cli.js文件
3. vue-template-cli.js 文件中寫入以下代碼

• #! /usr/bin/env node 用於指定該腳本使用node來執行，系統動態查找node，解決不機器和系統中的差異
• version指定當前cli的版本；
• command指定一個子命令，爲命令綁定一個操作處理程序，這裏的create命令會自動查找vue-template-cli-create.js執行
• parse 解析用戶輸入的參數
• on命令，監聽–hlep或者-h 參數

4. vue-template-cli-create.js 文件中寫入以下代碼

• commander的action命令用於操作處理程序的，可以獲取到用戶輸入的所有參數
• inquirer.prompt(),的參數是個數組，數組中是每個命令交互對象，type類型有很多種，可以查看官網
• download-git-repo這個模塊的參數，需要下載的項目地址不是平常clone的地址，而是github:+下面的地址

5. 在package.json中加入npm的模塊名稱以及主文件

三、上傳npm並使用

1. 如果沒有npm賬號，去npm官網註冊賬號後，在命令行輸入npm login 登錄，然後使用npm publish 上傳至npm倉庫即可
2. npm install -g vue-template-cli 全局安裝，使用vue-template-cli create ‘項目名稱’ 創建項目即可

關注我：前端Jsoning