一、安裝步驟

step1、安裝Node.js

首先需要下載並安裝Node.js，下載地址：Node官網。
可查看我的另外一篇文章，僅作參考：Node.js入門及安裝

測試安裝是否成功，打開cmd，使用 node -v，如果顯示版本號則表示安裝成功。

step2、安裝vue-cli

使用vue-cli（腳手架）搭建項目，vue-cli是Vue官方提供的用於搭建基於 vue+webpack+es6項目的腳手架工具。
GitHub地址：vue-cli

全局安裝：-g 表示全局安裝vue-cli

npm install -g vue-cli

如果安裝較慢，可以使用淘寶鏡像安裝。

cnpm install -g vue-cli
 

step3、初始化項目

初始化基於webpack的模板項目，projectName為項目名稱，可以自動生成目錄及相關文件，跟express生成器差不多。

vue init webpack projectName

在初始化的過程中會詢問一些相關的說明和配置，這些說明和配置會寫入package.json文件中，會自動生成對應的模塊。

如果需要使用ESLint規範和相關的unit test 和e2e，請輸入yes，這樣初始化出來的項目，會自動配置好對應的模塊。

step4、 下載項目依賴模塊

定位到項目根目錄，下載項目依賴的所有模塊。

npm install 

step5、運行項目

定位到項目根目錄下，使用命令：

npm run dev

使用命令運行項目，在瀏覽器中輸入http://localhost:8080可訪問。

整體過程：

# 全局安裝 vue-cli
npm install -g  vue-cli

# 創建一個基於 webpack 模板的新項目
vue init webpack projectName

# 安裝依賴，先定位到項目根目錄，然後安裝
cd  projectName
npm install

#運行項目
npm run dev

二、目錄說明

項目文件需要放到 src 文件夾下，相關的部分靜態資源需要放在static文件夾下。

項目開發完成之後，可以輸入 npm run build 來進行打包工作

npm run build

打包完成後，會生成 dist 文件夾，如果已經修改了文件路徑，可以直接打開本地文件查看

項目上線時，只需要將 dist 文件夾放到服務器就行了。

Vue.js之使用vue-cli初始化項目