VUE腳手架使用

什麼是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必定要是大寫.

安裝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項目拖拽到你的編程軟件的根目錄下:

會出現這些文件,這個時候,你就能夠進行編輯了