vue開發環境搭建步驟-Mac版

一、nodejs下載

1、nodejs下載
下載官網： http://nodejs.cn/
點擊macOS安裝包，點擊保存文件

2、驗證nodejs是否安裝成功
終端輸入node -v，如下圖所示，說明nodejs安裝成功

node -v

二、安裝淘寶鏡像npm

1、終端輸入這行，安裝淘寶鏡像npm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2、輸入cnpm -v，查看安裝的淘寶鏡像,發現報錯，是說我們需要改變文件的權限。
我們將報錯的這行提示命令運行下，
然後重新運行鏡像安裝命令，
安裝完成後查看鏡像cnpm -v，發現沒有報錯了。

三、安裝webpack、webpack-cli腳手架

sudo cnpm install -g webpack

sudo cnpm install -g webpack-cli

四、安裝vue-cli腳手架

安裝vue-cli腳手架

sudo cnpm install -g webpack

輸入vue，返回如下信息，說明安裝成功

vue

五、新建vue項目

1、項目初始化
創建一個vue項目，項目名爲vuetest1，做如下初始化。

vue init webpack vuetest1

2、切到項目目錄下，運行項目

cd vuetest1 

cnpm run dev

用熱加載的方式啓動項目，修改完代碼後就不用手動刷新瀏覽器就能實時看到修改後的效果了

3、運行結果：
在瀏覽器中訪問：http://localhost:8080，有如下結果，說明這個vue項目就新建好了，這個是vue默認的模板。