安裝node.js

首先需要下載 nodeJs 官網   next 安裝完成後

開啟命令列工具輸入命令node -v，如下圖，如果出現對應版本號，就說明安裝成功了

安裝cnpm

    nodejs有自帶的 npm但是國外的下東西比較慢  

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

 安裝成功後  cnpm -v 如下圖 安裝成功

vue安裝

  $ cnpm install vue 

安裝完成後

安裝vue-cli腳手架構建工具

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

$ cnpm install --global vue-cli   

下一步   $ cnpm install vue-cli -g

安裝webpack

$ cnpm install webpack -g

安裝完成後我們就可開始建立專案了  

建立專案

cd：到你要建立專案的目錄 輸入：

$ vue init webpack my-project ，注意這裡的“my-project” 是專案的名稱可以說是隨便的起名，但是需要主要的是“不能用中文” 需要一點時間   。

$ vue init webpack my- project   --------------------- 這個是那個安裝vue腳手架的命令
This will install Vue 2.x version of the template. ---------------------這裡說明將要建立一個vue 2.x版本的專案
For Vue 1.x use: vue init webpack#1.0 my- project  
? Project name ( my- project  ) ---------------------專案名稱
? Project name my- project  
? Project description (A Vue.js project) ---------------------專案描述
? Project description A Vue.js project
? Author Datura --------------------- 專案建立者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安裝Vue路由，也就是以後是spa（但頁面應用需要的模組）
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否啟用eslint檢測規則，這裡個人建議選no

? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "my-project ".
To get started: --------------------- 這裡說明如何啟動這個服務
如下圖：

 然後   cd my-project    
 初始化專案  $ npm install
 啟動服務   $ npm run dev
這個時候就會啟動一個8080埠

然後本地訪問： http://localhost:8080/   如下圖 

注意：這裡是預設服務啟動的是本地的8080埠，所以請確保你的8080埠不被別的程式所佔用。

下面我簡單的說明下各個目錄都是幹嘛的：

應用元件安裝

安裝 vue 路由模組 vue-router 和網路請求模組 vue-resource，輸入：cnpm install vue-router  vue-resource --save。