Vue.js是一套構建使用者介面的漸進式框架。它既集眾多優秀前端框架之大成，又保持了其簡單易用的特點。對vue.js感興趣並且已經通讀官方基礎教程的初學者來說，開始一個實戰專案是進一步深入學習vue.js最好的方式了。在此之前，需要學會如何搭建開發環境。

開發環境的搭建

安裝node.js

進入Node.js官網，選擇下載並安裝Node.js。安裝過程只需要點選“下一步”即可，如下圖，非常簡單。

驗證Node.js是否安裝好，在windows下，win+r召喚出執行視窗，輸入cmd開啟命令列視窗。輸入node -v即可得到對應的Node.js版本。

npm包管理器是整合在Node.js中了，所以在安裝Node.js的時候就已經自帶了npm。
輸入npm -v可得到npm的版本。

注意npm的版本需要在3.0.0以上版本，所以，如果npm的版本小於3.0.0,輸入以下命令更新npm至最新版本。

npm -g install npm

安裝cnpm

由於資源的限制，安裝npm依賴包的時候經常失敗，建議使用npm的國內映象cnpm 命令列工具代替預設的npm。

在命令列中輸入以下內容等待安裝

cpnm全域性安裝vue-cli

在命令列中執行以下命令然後等待安裝

cnpm install -g vue-cli

構建專案

新建專案

在這裡我將vue專案建在f盤的vueProjiects資料夾下，利用命令進入此目錄。在cmd中輸入碟符f:回車即可進入F盤：

輸入命令 cd vueProjects跳到此目錄下：

在此目錄下建立一個基於 webpack 模板的新專案,即在cmd中輸入以下命令：

vue init webpack my-vue-project

vue init webpack my-vue-project意思是初始化一個專案，利用的是webpack打包和壓縮，此專案命名為my-vue-project。這樣，my-vue-project資料夾就自動生成剛剛在指定的目錄中，在此過程中，需要輸入專案名、描述、作者等。

開啟my-vue-project資料夾，專案檔案如下：

安裝專案依賴

在cmd中，注意需要使用命令先定位到my-vue-project目錄下，然後輸入命令cnpm install安裝專案所需的依賴包資源

cnpm install

可以看到my-vue-project資料夾下多了一個node_modules檔案

執行專案

使用命令npm run dev 執行專案

npm run dev

專案執行成功後瀏覽器會自動開啟localhost:8080呈現以下頁面：

至此，vue的腳手架工具已經搭建完成，接下來具體專案的開發只需在src目錄下進行。