vue-cli項目
自從葉小凡在任務處大放異彩後，宗門內的其他弟子終於對葉小凡有了深刻的認知，林濤自那天起就宣布閉關，心中暗自發狠，一定要超越葉小凡。可是葉小凡卻開心不起來，自從學到了vue的基本招式，他就一直想要嘗試vue-cli的功法，可是葉老傳授給他的技能書中對於這一塊的介紹他實在看不懂。看不懂是因為中間有一道必須跨過去的坎，那就是node.js。
經過葉小凡的軟磨硬泡，葉老終於鬆口了，答應給葉小凡傳授node.js的技術。
“小子，我先給你說說node.js是什麼吧。所謂node.js，簡單來說，就是讓Javascript也可以編寫服務器的代碼。node.js是一門高深的學問，不過目前我們隻需要學會最基本的使用就行了。第一步是安裝node.js。node.js的安裝非常簡單，下載一個可用的安裝包（下載地址：http://nodejs.cn）即可。
“雙擊安裝包，一直單擊‘下一步’按鈕就可以。安裝完畢之後，進入命令行界麵看一下版本號。”
圖5-1 運行結果
“結果如圖5-1所示。隻要能夠正確顯示版本號，就說明安裝成功了。”葉老緩緩地說道。葉小凡忍不住試了一下，發現一下子就完成了，開心極了。注意：這一步如果沒有成功，則可能是因為計算機沒有自動配置環境變量，可以右擊“我的電腦”→“屬性”→“高級係統設置”→“環境變量”，在下方的“係統變量”中找到Path標簽，添加node.js的安裝目錄即可解決，如d：\Program files
odejs。
“node.js安裝好了以後，我就不過多介紹它的具體功能了，我剛才已經說了，node.js使得Javascript腳本也可以編寫後台程序代碼，不過，你想要學習vue-cli，也無須知道那麼多，你隻要學會使用npm和webpack就行了。”
5.2 使用npm發布模塊
“npm，那是啥？”葉小凡一臉的疑惑。
“npm的作用可大了，還記得我們之前封裝了一個按鈕組件嗎？”葉老說道。
“當然記得，我們還弄了好幾套顏色呢，這個組件算是使用vue完成的一次勇敢嘗試吧！”
“是的，雖然組件還很粗糙，但它確實是能用的！”這一點葉老也很讚同，繼續說道，“但是，組件雖好，也隻是小範圍地使用一下而已。如果別人也想用我們的按鈕組件，又該怎麼辦？”
葉小凡想了想，說道：“那我就把文件複製一下，送給需要的人。”
“這樣確實是可以的，但是卻很麻煩。”
“是挺麻煩的，可是沒辦法啊，除非所有人弄一個公共的倉庫，我再把這個組件放到倉庫裡麵，誰想要用，就去倉庫裡麵取便是了。”葉小凡靈機一動，高興地說了起來。
葉老讚賞地看了葉小凡一眼，心想這個徒弟到底是沒有白收，繼續說道：“不錯，就是這樣，npm就是起到了這個作用。正確地說，存放在npm倉庫中的都叫作模塊。隻要你願意，你可以在裡麵發布自已的模塊，也可以搜索別人上傳的模塊，拿過來直接使用。所有模塊都發布在https：//www.npmjs.com/上麵，所以在發布之前，需要到npm.js上注冊一個賬號，才有權限發布自已定義的模塊。”
“首先，我們注冊一個賬號吧。”
圖5-2 網站頁麵
官網頁麵如圖5-2所示，單擊“注冊”按鈕即可進入注冊頁麵。再單擊create Account按鈕輸入賬號和密碼即可。注冊成功後會自動登錄。注意：係統會發送一份激活郵件到你的郵箱，還要激活一下。
“好了，現在我們隨便找個地方新建一個空的文件夾，就叫作npm-study吧”。
如圖5-3所示，打開這個文件夾，新建一個yexiaofan.js，在裡麵寫一個簡單的函數。
圖5-3 新建文件夾
】節章錯無 𝘄𝘁.𝗽𝗼𝗼【
”。nosj.egakcap——件文個一成生再，來下接。分部一的塊模出導為作數函個這olleh把們我，出導是思意的stropxe“
”。件文置配包打個這成生以可就tini mpn令命用使接直。息信包打的件組個這是就nosj.egakcap，式格件文種一是nosj“
”。好就認默都項幾他其，吧nafoaixey成改它將次這們我，字名的夾件文是認默eman，值認默些一入輸要需，候時的nosj.egakcap成生“，示所4-5圖如
果結行運 4-5圖
”。吧容內的麵裡下一看們我，了來出經已nosj.egakcap“，示所5-5圖如
果結行運 5-5圖
”。個一有能隻口入說者或，件文動啟的塊模是但，源資他其些一到用使會能可塊模的雜複些一，件文動啟的塊模表代niam，述描的塊模表代noitpircsed。號本版級升以可還，善完和化細精益日的塊模著隨，0.0.1是認默，號本版是noisrev。nafoaixey它叫就，字名的塊模是eman“
”。tset個一有隻麵裡，象對nosj個一是容內的段字stpircs到看以可，中件文nosj.egakcap的成生認默個這在。令命本腳義定段字stpircs用使麵裡件文nosj.egakcap在許允mpn“
”。令命tset行運接直錄目前當在們我，如比。1 tixe && "deificeps tset on：rorre" ohce是本腳的應對令命tset，令命是tset？呢思意啥是個這“
果結行運 6-5圖
了確明很思意“，示所6-5圖如果結
