什么是vue腳手架?
他是一個快速構建vue項目的工具,通過他,我們可以將vue所需要的文件安裝完成。
vue-cli這個構建工具大大降低了webpack的使用難度,支持熱更新,有webpack-dev-server的支持,
相當於啟動了一個請求服務器,給你搭建了一個測試環境,只關注開發就OK。
安裝vue-cli腳手架
安裝腳手架需要用cnpm(淘寶鏡像)安裝,直接用pip安裝會失敗,安裝cnpm命令如下:
npm install cnpm -g --registry=https://registry.npm.taobao.org
安裝成功輸入:cnpm-V,查看cnpm是否安裝成功,
注意V一定要是大寫.(如果失敗的話,可能是沒有配置cnpm的環境變量)
安裝vue腳手架命令去下:
cnpm install -g vue-cli
安裝成功是下面這樣的
然后使用vue-V查看是否安裝成功.
如果安裝失敗可能是cnpm版本過低,更新cnpm的版本即可.
cnpm更新必須要手動更新,更新命令如下:
npm install -g npm
使用vue init webpack myitem 這條命令,就可以創建一個vue
的腳手架。
解釋一下命令:
vue init 即使用vue-cli初始化一個項目。
webpack 是說使用webpack作為構建工具。
firstvue 是項目名稱。 注意: 項目名稱推薦使用小寫字母。
安裝時會暫停一下,你點擊Enter進行下一步就可以了,
Install vue-router? 是否安裝vue的路由?如果你要做前后端的項目的話,就要選擇yes,建議選擇yes.
Pick an unit tester jest 是否單元測試
其他的更具自己的需求進行選擇
安裝成功會顯示出這兩個命令:
這個時候進入你新建的vue項目的目錄下,你會發現他新建了一個mytime的文件夾
在運行項目前,需要安裝依賴,命令如下:
cnpm install
Vue需要在黑窗口啟動一下.
啟動之前進入vue的項目根目錄下.輸入命令:
cd mytime 進入根目錄
npm run dev 啟動項目
啟動成功效果如下:
復制路由: http://localhost:8081,在谷歌瀏覽器打開,會顯示頁面:
這個時候,一個完整的vue腳手架成功搭建成功.
把你新建的vue項目拖拽到你的編程軟件的根目錄下:
會出現這些文件,這個時候,你就可以進行編輯了