最近收到幾位老師留言,提到一些腳手架相關的問題,跟著自己淺顯的理解,以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
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( 91whvog3.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務