一、NodeJS下載安裝

可能沒有學習過Node.js的同學很有疑問，這個下載的作用是什麼？我們在學習vue.js時，不一定要是學過node.js的，我們需要的是NodeJS裡npm工具，npm是NodeJS下的一個包管理工具，它可以很方便的幫你管理（可以簡單理解為下載）各類前端的框架或外掛，類似於PHP的composer，Twitter 的 Bower 一樣。使用Vue不需要安裝NodeJS，這裡下載NodeJS只是為了使用其內建的NPM工具，所以不需要你有任何的NodeJS基礎，只需要執行 npm install vue 命令，即可把 Vue 的最新版本下載至 node_modules 資料夾。我們可以去官網下載，下面是安裝連結: http://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html

二、安裝vue-cli

（我看的影片和部落格沒有給出這一步，直接是安裝淘寶映象去了，導致cnpm安裝失敗了很多次，也不知道是出了什麼差錯，查詢資料費了很多時間才解決）npm實際已經存在nodejs安裝檔案中~~~

win+R  ，輸入cmd，開啟DOS命令板：輸入命令 “npm install --global vue-cli”，會出現以下情況：

我們可以用命令列“npm -v”或“node -v”檢視安裝的版本號，以此來檢測是否安裝成功：

三、cnpm的安裝安裝完node之後，npm包含的很多依賴包是部署在國外的，在天朝，大家都知道下載速度是超級慢啊。所以我們要安裝cnpm，cnpm是淘寶對npm的映象伺服器，這樣依賴的包安裝起來就快多了。安裝命令為：npm install -g cnpm --registry=https://registry.npm.taobao.org

四、vue-cli的安裝(cnpm下再全域性安裝vue-cli)

vue-cli是vue官方提供的一個命令列工具，可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需一分鐘即可啟動帶熱過載、儲存時靜態檢查以及可用於生產環境的構建配置的專案。安裝命令為：cnpm install -g vue-cli，回車，等待安裝。

安裝完後，檢查是否安裝成功，輸入vue，出現以下提示表示安裝成功。

五、試試新建一個Vue專案（1）新建一個專案資料夾，命名為 vue-demo，cd到此資料夾，輸入:vue init webpack vue-demo，回車，按照如下操作進行初始化：

我們暫時不適用模板提供的測試框架，Karma + Mocha，以及Nightwatch。（2）專案目錄

（3）安裝專案依賴的包（進入到一個檔案中的cmd指令是cd vue-demo）cd到vue-demo 資料夾，執行cnmp install，安裝依賴包，安裝完成之後，專案目錄下多了node_modules：

（4）執行專案在命令列裡輸入 cnpm run dev，執行完成後啟動專案，瀏覽器出現以下接結果，說明啟動成功。注意瀏覽器的版本，低版本的不支援哦。

（5）構建專案

在命令列裡輸入

cnpm install node-sass

cnpm run build

cmd使用

1，“開始”——“執行”，輸入CMD，回車。2，出現“命令提示符”的視窗，一般情況下是 C:\Documents and Settings\Administrator> ，輸入 F： 回車，就變成 F:\> 了。3，輸入 dir 就可以看到F盤下面的檔案了。4，cd （後面跟你的照片資料夾的名字）。例如：F:\>cd TDDownload 就可以進入到F盤下的TDDownload資料夾。5、輸入 cd\ 回車 返回主目錄6、輸入 cd.. 回車 返回上一級目錄