最近收到幾位老師留言，提到一些腳手架相關的問題，跟著自己淺顯的理解，以vue腳手架在windows系統上的執行為例做個分析。
正題之前，先說幾個概念
腳手架的本質：運行在操作系統上node客戶端里的可執行程序。
腳手架做了哪些工作？一般腳手架的工作內容主要包括三方面：
-
創建項目+通用代碼： 埋點、http請求、工具方法、組件庫。
-
git操作： 創建倉庫、代碼沖突、遠程代碼同步、創建版本、發布打tag。
-
構建+發布上線： 依賴安裝和構建、資源上傳CDN、域名綁定、測試\正是服務器。
腳手架給我們帶來哪些好處？提升前端研發效能！（就這么一句空話~~）從其為我們帶來的最終體驗上來講，是實現研發過程的：
-
自動化：項目重復代碼的copy、git操作、發布上線操作；
-
標準化：項目創建、git flow、發布流程、回滾流程；
-
數據化：使研發過程系統化、數據化、使得研發過程可量化。
腳手架的命令執行：
vue create csjName –g
-
vue 是腳手架名稱
-
create 是command，腳手架中已注冊的命令
-
csjName 是params，命令的參數
-
–g 是options，命令的配置
-
一般options后也會有參數，我們稱之為配置參數，上面命令其實是省略了true
vue create csjName –g true
下面說一下vue腳手架的執行過程
環境要求，已安裝node
先來思考一個問題：
我們安裝vue腳手架時，安裝的是@vue/cli
npm install @vue/cli –g
為什么創建項目的時候用的卻是vue
vue create projectName
咱們先看 npm install @vue/cli –g命令完成拉資源后，在操作系統中都做了什么。
命令執行完成后，咱們切換到D:\mysoft\node\node_global（這個是自己安裝node時設置的全局npm包的安裝路徑，并且已配置到環境變量中，不清楚的老師可以去熟悉一下node的安裝教程），發現此路徑下已經生成了一個cmd命令vue.cmd，因為此路徑已配置到環境變量中，所以在cmd我們必然可以直接輸入vue來執行vue.cmd。
那么vue.cmd文件中又執行了什么？打開vue.cmd
可以看到，其實它是去調用了vue腳手架資源路徑下的vue.js文件
正如我們在這個路徑下執行
node vue.js create csjName
是一樣的。腳手架的命令及其參數的注冊與解析都在此文件中完成。具體的代碼邏輯不再深入講了，因為我也沒看。。。。。
再來思考個問題，在完成腳手架資源的下載后，為什么會在D:\mysoft\node\node_global下自動生成一個vue.cmd？我們能不能自定義這個腳手架的名字？
其實每個腳手架都是npm項目，vue.cmd是在此npm項目的package.json中配置的，我們也可以對其自定義修改。
欲修改腳手架名稱，直接去D:\mysoft\node\node_global下重命名vue.cmd即可。如果是自己的腳手架，可在npm項目內的package.json中通過上述配置，指定腳手架的名稱。
補充
另外在linux或mac系統中，其實node\node_global下并未生成vue.cmd，而是生成了一個叫做vue軟鏈接，并且鏈向了node_global\node_modules\@vue\cli下的vue.js。
而且在linux和mac系統中，并未使用node vue.js，而是直接執行了vue.js那是因為在vue.js頂部已通過Shebang聲明當前文件默認使用系統中環境變量/usr/bin/env 下的node解釋器執行。此語法在windows系統中無效。
以上是對vue腳手架在windows中執行過程的淺顯理解。不到之處，還請指正~~
最后安利一個自己已發布的npm項目csjtools，旨在打造一個前端通用的工具庫，就是自己平常封裝的js工具函數，如對timeout的異步封裝、對storage的面向對象的封裝、對日期格式的轉換、還有對象之間的深比較等，目前工具還不夠豐富，歡迎大家一起使用&完善，一個人的力量很小~~
npm install csjtools -g
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.sdgs6788.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
