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