一、安裝node.js

首先需要安裝node環境，可以直接到中文官網http://nodejs.cn/下載安裝包。

安裝完成後，可以命令列工具中輸入node -v 和 npm -v，如果能顯示出版本號就安裝成功。

二、安裝vue-cli

安裝好node，我們可以直接全域性安裝vue-cli：

npm install -g  vue-cli  (但是這種安裝方式比較慢，推薦使用國內映象來安裝)

所以，先設定cnpm:

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

如果安裝失敗，可以使用npm cache clean 清理快取，然後再重新安裝。同樣可以使用cnpm -v檢視是否安裝成功

然後使用cnpm 安裝vue-cli和webpack:

cnpm install -g vue-cli

最新的vue專案模板中，都帶有webpack外掛，所以這裡可以不安裝webpack

安裝完成後，可以使用vue-V（注意V要大寫）檢視是否安裝成功

如果提示“無法識別‘vue’”，有可能是npm版本過低，可以使用npm install -g npm來更新版本

三、生成專案

首先需要在命令列中進入到專案目錄，然後輸入： vue init webpack Vue-Project

其中webpack是模板名稱，可以到vue.js的GitHub上檢視更過的模板https://github.com/vuejs-templates

Vue-Project是自定義的專案名稱，命令執行之後，會在當前目錄生成一個以該名稱命名的專案資料夾

配置完成後，可以看到目錄下多出了一個專案資料夾，裡面就是vue-cli建立的一個基於webpack的vue.js專案，然後進入專案目錄（cd Vue-Project）,使用cnpm安裝依賴

cnpm install

然後啟動專案

npm run dev

如果瀏覽器開啟之後，沒有加載出頁面，有可能是本地的8080埠被佔用，需要修改一下配置檔案config>index.js

建議將埠號改為不常用的埠，另外我還將build的路徑字首修改為‘./’(原本是‘/’),是因為打包之後，外部引入js和css檔案時，如果路徑以‘/’開頭，在本地是無法找到對應檔案的（伺服器上沒有問題）。所以如果需要在本地開啟打包後的檔案，就得修改檔案路徑。

四、打包上線

自己的專案檔案都需要放到src檔案下

專案開發完成後，可以在命令列輸入npm run build 來進行打包工作，打包完成後會生成dist資料夾，如果已經修改了檔案路徑，可以直接開啟本地檔案檢視，專案上線時，只需要將dist 資料夾放到伺服器就行了

五、vue的整合環境建立之後

 App.vue 是父元件，components 資料夾下都是子元件。在src下面的components目錄（元件目錄）下新建一個Test.vue檔案（檔案首字母要大寫）檔案內容如下：

在router目錄下面（路由跳轉目錄）下的index.js頁面中新增，我們剛才新增的Test.vue頁面的跳轉路由。檔案內容如下：

使用ctrl+~快捷鍵，就可以出行命令列輸入頁面。

命令列中輸入npm start命令(或者npm run dev)

想要停止執行中專案的話可以輸入快捷鍵ctrl+C

瀏覽器中輸入專案的啟動地址，看看是否配置成功。如下圖所示：

最後，說明一點：專案全域性vue名字叫做App.vue、啟動js檔案是main.js