一、前言 
因工作緣故，需要做一個移動端app,面對2016下半年至今webapp最流行的三個技術React,angular,vue，三選一，如何先，經過前期的技術選型，最後決定使用vue。具體檢視本人之前的blog移動app技術選型，react,angular,vue

二、vue開發環境的搭建 
由於本人使用的是mac,所以環境是windows的下面可以忽略……

通過下面一張圖對Vue的整體開發環境有一個大體瞭解： 
 
注：上面的圖片轉自Vue2.0 新手入門 — 從環境搭建到釋出 
本人使用的各個工具的版本為： 
Homebrew 1.2.4 
node.js v6.11.1 
npm 5.0.3 
webpack 3.2.0 
Vue 2.8.2

1、安裝brew 
開啟終端執行以下命令：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

• 1

安裝成功後，檢視一下brew的版本資訊：

brew -v

• 1

注：我安裝成功後，在檢視brew的資訊是出現”-bash: brew: command not found”,處理方法：解決mac安裝homebrew後報錯-bash: brew: command not found，還要說明一點的是，我沒有vim去修改那個檔案，我是直接找到那個檔案用文字編輯器直接修改的。

2、安裝node.js 
在終端中執行以下命令：

brew install nodejs

• 1

安裝成功後，檢視一下node.js的版本資訊：

node -v

• 1

3、獲取nodejs模組安裝目錄訪問許可權

　sudo chmod -R 777 /usr/local/lib/node_modules/

• 1

4、安裝 淘寶映象 （npm）

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

• 1

5、安裝webpack

cnpm install webpack -g

• 1

6、安裝vue腳手架

npm install vue-cli -g

• 1

7、在硬碟上找一個資料夾放工程用的，在終端中進入該目錄

cd 目錄路徑

• 1

8、根據模板建立專案

vue init webpack-simple 工程名字<工程名字不能用中文>
如下
vue init webpack-simple demo1

• 1
• 2
• 3

會有一些初始化的設定，如下輸入: 
Target directory exists. Continue? (Y/n)直接回車預設(然後會下載 vue2.0模板，這裡可能需要連代理) 
Project name (vue-test)直接回車預設 
Project description (A Vue.js project) 直接回車預設 
Author 寫你自己的名字

cd 命令進入建立的工程目錄

cd demo1

• 1

注意：最後三步都是要進入到當前工程目錄後執行的。

9、安裝專案依賴

npm install

• 1

比較慢，需要有點耐心……

10、安裝 vue 路由模組vue-router和網路請求模組vue-resource

cnpm install vue-router vue-resource --save

• 1

11、啟動專案

npm run dev

• 1

學習Vue的一個非常重要的途徑就是Vue官網： 

燃燒吧，少年！！！

注：學習一門新技術，最開始就是環境搭建，我反正不是一次成功的，我也相信很多人也不是一次成功的，我是裝了卸，卸了裝。就是按照別人寫的文件，一步一步照做，也會出現莫名其妙的錯誤和問題。不管是windows還是mac都會有各種坑，mac的坑會多些，這就需要我們有更多的耐心，多試幾次，碰到報錯，多看幾眼報錯的日誌，多搜尋幾篇報錯相關的文章，多看幾遍別人處理問題的方法。下載或線上安裝相關工具、軟體、外掛時，也不要著急，網還慢，我們更要有耐心的去等。最後，通過我們的耐心，對技術原本的敬畏、虔誠的心態，一定會搞定的。

另，推薦Vue作者在weibo中推薦的Vue原始碼學習（或分析）的文章：Vue2.1.7原始碼學習

還有就是windows下vue環境搭建參考作者充電實踐的文章：windows下搭建vue開發環境