ps: 想了解更多vue相關知識請點選VUE學習目錄彙總
Vue作為前端三大框架之一截至到目前在github上以收穫44,873顆星，足以說明其以悄然成為主流。16年10月Vue釋出了2.x版本，經過了一段時間的摸索和看官方的教程和api，才瞭解到2.0版本在1.0版本的基礎上做了好多調整，廢棄了好多api。。。廢話不多說了，把我踩過的坑，在這裡跟大家說說，希望對初學者有所幫助。ps：高手請繞道。
說明：此文章參考了網上一些前人的技術分享，自己拿過來總結一下。此文章是基於webpack構建的vue專案，並實現簡單的單頁面應用。其中利用到的相關技術會簡單加以說明
一、那麼我們就從最簡單的環境搭建開始：
- 安裝node.js，從node.js官網下載並安裝node，安裝過程很簡單，一路“下一步”就可以了（傻瓜式安裝）。安裝完成之後，開啟命令列工具(win+r，然後輸入cmd)，輸入 node -v，如下圖，如果出現相應的版本號，則說明安裝成功。
這裡需要說明下，因為在官網下載安裝node.js後，就已經自帶npm（包管理工具）了，另需要注意的是npm的版本最好是3.x.x以上，以免對後續產生影響。
- 安裝淘寶映象，開啟命令列工具，把這個（npm install -g cnpm --registry= https://registry.npm.taobao.org）複製（這裡要手動複製就是用滑鼠右鍵那個，具體為啥不多解釋），安裝這裡是因為我們用的npm的伺服器是外國，有的時候我們安裝“依賴”的時候很很慢很慢超級慢，所以就用這個cnpm來安裝我們說需要的“依賴”。安裝完成之後輸入 cnpm -v，如下圖，如果出現相應的版本號，則說明安裝成功。
- 安裝webpack，開啟命令列工具輸入：npm install webpack -g，安裝完成之後輸入 webpack -v，如下圖，如果出現相應的版本號，則說明安裝成功。
- 安裝vue-cli腳手架構建工具，開啟命令列工具輸入：npm install vue-cli -g，安裝完成之後輸入 vue -V（注意這裡是大寫的“V”），如下圖，如果出現相應的版本號，則說明安裝成功。
二、通過以上四步，我們需要準備的環境和工具都準備好了，接下來就開始使用vue-cli來構建專案
- 在硬碟上找一個資料夾放工程用的。這裡有兩種方式指定到相關目錄：①cd 目錄路徑 ②如果以安裝git的，在相關目錄右鍵選擇Git Bash Here
- 安裝vue腳手架輸入：vue init webpack exprice ，注意這裡的“exprice” 是專案的名稱可以說是隨便的起名，但是需要主要的是“不能用中文”。
$ vue init webpack exprice --------------------- 這個是那個安裝vue腳手架的命令
This will install Vue 2.x version of the template. ---------------------這裡說明將要建立一個vue 2.x版本的專案
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) ---------------------專案名稱
? Project name exprice
? 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 "exprice".
To get started: --------------------- 這裡說明如何啟動這個服務
cd exprice
npm install
npm run dev
如下圖：
- cd 命令進入建立的工程目錄，首先cd exprice（這裡是自己建工程的名字）；
- 安裝專案依賴：npm install，因為自動構建過程中已存在package.json檔案，所以這裡直接安裝依賴就行。不要從國內映象cnpm安裝(會導致後面缺了很多依賴庫)，但是但是如果真的安裝“個把”小時也沒成功那就用：cnpm install 吧
- 安裝 vue 路由模組 vue-router 和網路請求模組 vue-resource，輸入：cnpm install vue-router vue-resource --save。
建立完成的“exprice”目錄如下：
下面我簡單的說明下各個目錄都是幹嘛的：
- 啟動專案，輸入：npm run dev。服務啟動成功後瀏覽器會預設開啟一個“歡迎頁面”，如下圖：
注意：這裡是預設服務啟動的是本地的8080埠，所以請確保你的8080埠不被別的程式所佔用。
至此簡單的一個專案構建完畢....後面我將繼續利用這個構建的專案寫一個簡單的單頁面應用。看到這裡給大家推薦一個ide用Atom然後安裝vue外掛即可，非常之好用
Vue2.0史上最全入坑教程（中）
作者：datura_lj
連結：http://www.jianshu.com/p/1626b8643676
來源：簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。