一、npm 版本查看及升級

// 查看版本
npm -v
// 升級版本
npm install -g npm

注：若npm install 報錯 permission denied，使用sudo npm install -g npm

二、安裝vue相關工具

1. 安裝vue

// 最新穩定版
npm install vue
// 安裝vue-cli腳手架構建工具
npm install --global vue-cli

安裝完成，輸入vue -V，如果出現相應的版本號，則說明安裝成功。如圖：

sybil052-20190108-105855.png

注：Mac 使用安裝vue-cli腳手架的時候報錯，
解決方法：
1.切換到/usr/local/lib/node_modules/目錄
cd /usr/local/lib/node_modules/
2.刪除vue-cli文件夾
open /usr/local/lib/node_modules/
3.重新安裝vue-cli
npm install --global vue-cli

2. 安裝webpack

npm install --global webpack
npm install --global webpack-cli

安裝完成，輸入webpack -v，如果出現相應的版本號，則說明安裝成功。如圖：

sybil052-20190108-111334.png

三、新建項目

1. 創建新項目

// 創建一個基于 webpack 模板的新項目
vue init webpack my-project
// 這里需要進行一些配置，默認回車即可

sybil052-20190108-112831.png

2. 運行項目

cd my-project
npm run dev

成功執行以上命令后訪問 http://localhost:8080/，輸出結果如下所示：

sybil052-20190108-113210.png