vue 推薦的開發環境：

• node.js: JavaScript執行環境（runtime），不同系統直接執行各種程式語言
• npm: node.js下的包管理器。由於國內使用npm會很慢，這裡推薦使用淘寶NPM映象（http://npm.taobao.org/）
• webpack: 它主要的用途是通過 CommonJS 的語法把所有瀏覽器端需要釋出的靜態資源做相應的準備，比如資源的合併和打包。
• vue-cli: vue的腳手架，使用者生成Vue工程模板

一、安裝Node.js

從Node.js官網上下載並安裝node，安裝過程很簡單，一路"下一步"即可。

安裝完成之後，開啟命令列工具，輸入node -v，如下圖，如果出現相應的版本號，則說明安裝成功。

npm包管理器，是整合在node中的，所以，直接輸入npm -v就會如下圖所示，顯示出npm的版本資訊。

OK！node環境已經安裝完成，npm包管理器也有了。

由於有些npm有些資源被遮蔽或者是國外資源的原因，經常會導致用npm安裝依賴包的時候失敗，所有我還需要npm的國內映象--cnpm。

二、安裝cnpm

在命令列中輸入如下程式碼然後等待

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

安裝完成如下圖。

完成之後，我們就可以用cnpm代替npm來安裝依賴包了。cnpm的使用方法和npm完全一致，只需要將npm改為cnpm即可。

三、安裝vue-cli腳手架構件工具

在命令列中執行命令npm install -g vue-cli，然後等待安裝完成，安裝完成後可以通過vue -V （這裡的 V 必須大寫）來檢視vue版本。

注：

如果在執行npm install -g vue-cli時出現npm warn optional skipping optional dependency: fsevents的問題。

如下圖

原因是fsevent是mac osx系統的，如果是在win或者Linux下使用，便會產生警告，忽略即可

四、用vue-cli構件專案

要建立專案，首先我們要選定目錄，然後再命令列中把目錄轉到選定的目錄。在選定的目錄下，在命令列中執行命令vue init webpack myVue。

解釋一下這個命令，這個命令的意思是初始化一個專案，其中webpack是構建工具，也就是整個專案是基於webpack的。其中myVue是整個專案資料夾的名稱，這個資料夾會自動生成在你指定的目錄中，如下圖。

執行初始化命令的時候回讓使用者輸入幾個基本的選項，如專案名稱，描述，作者等資訊，如果不想填直接回車預設就好。

開啟myVue 資料夾，專案檔案如下所示：

這就是整個專案的目錄結構，其中，我們主要在src目錄中做修改。這個專案現在還只是一個結構框架，整個專案需要的依賴資源都還沒有安裝，如下圖。

五、安裝專案所需依賴

要安裝依賴包，首先cd到專案資料夾（myVue資料夾），然後執行命令cnpm install或npm install，等待安裝。

安裝完成之後，會在我們的專案目錄myVue資料夾中多出一個node_modules資料夾，這裡邊就是我們專案需要的依賴包資源。

安裝完依賴包之後，就可以執行整個專案了。

六、執行專案

在專案目錄中，執行命令npm run dev，會用熱載入的方式執行我們的應用，熱載入可以讓我們在修改完程式碼後不用手動重新整理瀏覽器就能實時看到修改後的效果。