使用vue-cli快速搭建vue項目

直接上乾貨......

步驟：

1.安裝node.js；（下載地址：https://nodejs.org/en/download/）安裝完成之後，在命令窗口輸入node -v   查看node版本。

2.安裝npm；（node自帶npm，在命令窗口輸入npm -v   查看npm版本）

3.安裝webpack；（在命令窗口輸入npm install webpack -g，如安裝完成，輸入webpack -v便可查看版本）

4.安裝vue-cli；（在命令窗口輸入npm install vue-cli -g，如安裝完成，輸入vue -V便可查看版本，注意這裏是大寫的「V」）

5.在命令窗口經過cd命令進入你想建立項目的文件夾（或者手動打開你想建立項目的文件夾，在文件夾內按住shift+鼠標右鍵，選擇「在此處打開powershell窗口」），輸入vue init webpack vue02 （vue02爲你建立的項目文件夾的名字，可自行更改），會出現提示，一路回車或者輸入yes回車，而後等待安裝依賴便可。提示以下圖：

安裝完成後以下圖：

到此爲止vue項目已經建立完成。

注意：以上各步驟安裝過程當中若是出翔關於 「 let ... 」 之類的報錯，多是node版本的問題，更換其餘版本試試。

 

經過vue-cli建立的項目帶有示例，下面咱們運行並打開示例項目：

6.按照提示執行上圖圈紅的命令：

 7.複製上圖圈紅的連接，粘貼到瀏覽器地址欄訪問便可看到示例項目。以下圖：