1.安裝node.js

點擊下載pkg安裝包,進行安裝。

2.驗證安裝狀態(tài)

輸入node -v 和 npm -v 檢查是否安裝成功，出現(xiàn)版本號，證明安裝成功。

3.安裝cli腳手架

在終端輸入 npm install --global vue-cli這行命令并執(zhí)行,執(zhí)行以后有很大概率出現(xiàn)錯誤

錯誤信息

主要錯誤信息是

The operation was rejected by your operating system.
It is likely you do not have the permissions to access this file as the current user

翻譯一下是說我們沒有權(quán)限,解決方法是：
執(zhí)行 sudo chown -R $USER /usr/local,
然后輸入密碼，
再次執(zhí)行npm install --global vue-cli命令即可。

成功安裝腳手架

4.安裝webpack

到這里我們已經(jīng)配置好了node環(huán)境，并且安裝了腳手架,接下來就可以安裝webpack了,執(zhí)行命令
npm install webpack@3.6.0 -g進行安裝。

webpack安裝成功

這里需要注意一下,執(zhí)行完命令以后,我們安裝的是vue2.x的版本,這里我忽略掉了,本打算切換完路徑以后通過vue create myproject新建項目的,然后vscode就給我提示了.

提示

這里我們可以通過vscode的提示,先執(zhí)行

npm uninstall -g vue-cli

卸載掉2.x的版本,然后通過

npm install -g @vue/cli

安裝3.x的版本再去執(zhí)行新建項目的命令就可以了.當(dāng)然我們也可以直接用2.x的方式新建項目,正確做法是將新建項目的命令改成

vue init webpack myproject

執(zhí)行即可。

項目創(chuàng)建成功

新建好了項目,按照vscode的提示,執(zhí)行cd myproject命令和npm run dev,將項目運行起來。

項目運行起來了

在瀏覽器打開地址 http://localhost:8080,看到如下內(nèi)容,證明項目新建成功。

項目頁面