vue最開始說是庫,現在應該可以說是框架了,很多大公司都開始用vue了,這得源於vue的本質 1:數據化驅動,2:組件化模板。項目中用vue都得搭建環境,經過一段時間的摧殘后終於有勇氣來寫篇關於vue環境搭建的博文了,我相信網上已經有很多前輩的博文能夠幫助大家完成搭建,與我來說只是記錄下自己搭建環境的一點心得,如若能夠幫助到兩三人,足以。
1:因為vue.js的運行是基於node.js的npm環境下,所以我們得先安裝node.js,這個就不累贅了,網上下個node.js安裝即可。
2:記得剛開始的時候都不知道在什么地方輸入命令。為了非計算機轉行的同學看的明白→ a 移動你的鼠標至電腦左下角 b 點擊,看到運行后點擊運行,c 輸入cmd。
看到的就是命令面板。因為是在node.js的npm環境下執行的,所以我們得安裝npm。這里有一個小技巧:如果在cmd中直接使用npm來安裝的一些工具的話會比較慢,所以我們使用淘寶的npm鏡像: npm install -g cnpm –registry=https://registry.npm.taobao.org 即可安裝npm鏡像,以后再用到npm的地方直接用cnpm來代替就好 了 。
3:開始安裝全局vue-cli腳手架,之所以要用vue-cli,是應為這個工具能幫我們搭建好我們需要的模板框架(可以理解為各種文件模板),比較簡單。方法:cnpm install -g vue-cli 回車,驗證是否安裝成功,在命令行中輸入vue,出來vue的信息說明安裝成功
4:安裝玩全局腳手架后,創建項目vue init webpack vue_project(vue_project為項目名)
此處會出現一系列安裝的信息,ESLint to your code 建議選No ,就是對寫代碼進行規范。最開始的時候沒搞清楚選擇了Yes,寫項目的時候多個空格符號
都會報錯,很疑惑,報錯的地方還比較多,建議如圖所示選擇。直接輸入n然后按回車進入下一項。
至此一個新的項目文件就被創建了,因為是在vue-cli下安裝的,所以是vue-cli提供的默認模板樣式
![]()
5:
vue-cli安裝出來的項目模板間是相互依賴的,所有我們需要進入項目中安裝項目依賴。cd vue_project 回車 進入項目中(cd是進入的意思)
★★★ 此處需特別注意:從npm上安裝依賴,即npm install雖然慢了點,但是安裝的依賴包是完全的,沒有少文件。
如若從cnpm上安裝依賴,即cnpm install 可能會導致最后安裝的依賴包不完整。
★不建議從淘寶鏡像上即cnpm安裝依賴,可能會導致項目運行不了。
(出問題時可以試着兩者都試試)
完成后你會發現項目中多了個node_modules文件,就是依賴包。
6:
在項目中
cnpm run dev 運行項目
8080是默認端口,在瀏覽器中輸入localhost:8080就可以看到默認被打開了。
★:已經安裝過npm環境和vue-cli全局腳手架了,下次創建項目的時候就不用再安裝了,直接重復4 5 6步就可以了。
如果是運行已經存在的項目則直接第6步就ok。