一、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，如果出現相應的版本號，則說明安裝成功。如圖：

注：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，如果出現相應的版本號，則說明安裝成功。如圖：

三、新建項目

1. 創建新項目

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

? Project name vue-start //項目名稱

? Project description A Vue.js project // 項目描述

? Author  // 作者名稱

? Vue build standalone // 推薦選前者

? Install vue-router?

// 是否安裝vue-router路由組件，也可不安裝使用第三方或簡單的項目自己寫

? Use ESLint to lint your code?

// 是否使用eslint管理代碼，個人項目不推薦

? Set up unti tests?

// 是否使用karma來做單元測試

? Setup e2e tests with Nightwatch?

// 是否安裝e2e測試

? Should we run 'npm install' for you after the project has been created?

// 選擇使用npm或yarn進行安裝模塊

2. 運行項目

cd my-project

npm run dev

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

退出監聽，直接關閉cmd窗口即可。

目錄結構

• build -- 大部分是webpack的配置文件

• config -- 配置文件，比如配置監聽端口

• node_modules -- 依賴包都在這里

• src -- 主工程文件夾 ，基本上所有的開發都在這個文件夾進行

• static -- 靜態文件目錄

• package.json -- 項目的一些配置信息