Vue這裡就不多作介紹了，首先我們要安裝好整個開發環境，其實Windows和Mac的整個過程基本一樣

開發環境：

( Mac的包管理神器 ) →  →  cnpm（淘寶映象，節省安裝時間） →  webpack →  vue-cli（vue腳手架） → IDE（ Vue開發我用的是 ）

1.開啟terminal 安裝homebrew

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

2.安裝node.js

直接在node.js官網下載安裝，全程傻瓜式安裝。node.js是自帶npm的，npm在後面安裝別的環境需要用到。

安裝完後，我們可以通過在terminal中輸入 node -v ，npm -v 分別檢查node.js 和npm 的版本

mac 這裡需要注意！！要給npm安裝目錄訪問許可權，否則npm安裝別的東西都會失敗（至少我是這樣子...）

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

3.安裝cnpm

在terminal裡輸入

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

4.安裝webpack

cnpm install webpack -g

在terminal中輸入webpack -v檢查是否安裝成功以及檢視版本號

5.安裝vue-cli

npm install vue-cli -g

在terminal中輸入vue -V（注意這裡是大寫V）檢查是否安裝成功以及檢視版本號

6.安裝VSCode

好了開發環境到這裡就搭建好了，真的很麻煩...

接下來我們就要開始建立專案了

找一個放工程的資料夾，terminal cd 到該目錄，mac下可以直接把資料夾拖到terminal ，會自動填入路徑

cd 目錄路徑

使用vue-cli建立專案，需要注意專案的名字不能用中文

vue init webpack-simple projectname

建立的過程會問一堆的問題，具體如下：

$ vue init webpack projectname --------------------- 安裝vue-cli的命令
This will install Vue 2.x version of the template. 
For Vue 1.x use: vue init webpack#1.0 projectname
? Project name (projectname) 
? Project name projectname
? Project description (A Vue.js project) 
? Project description A Vue.js project
? Author Joe --------------------- 專案建立者
? Author Joe
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安裝Vue路由
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否啟用ESLint
? 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 "projectname".
To get started: --------------------- 這裡說明後續的三個步驟
cd projectname
npm install
npm run dev
 

安裝專案依賴庫

cd projectname -------cd 到目錄
npm i --------安裝依賴，這裡如果安裝很久都不成功的話，才換成cnpm，因為cnpm會導致後面缺了很多依賴庫

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

cnpm install vue-router vue-resource --save  

到這裡就終於安裝完所有的東西，下面是專案的目錄說明

啟動專案，輸入：npm run dev。服務啟動成功後瀏覽器會預設開啟一個“歡迎頁面”

npm run dev

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

當然這個埠也是可以修改的，在根目錄的config資料夾下有個index.js檔案，除了修改埠，還可以根據需要改變其他配置資訊。

這就是Vue專案的構建全過程，現在可以看我的另一篇文章→ 。