Vue.js 執行環境搭建詳解及vue、node基礎知識普及
Vue.js 是一套構建使用者介面的漸進式框架。他自身不是一個全能框架——只聚焦於檢視層。因此它非常容易學習，非常容易與其它庫或已有專案整合。在與相關工具和支援庫一起使用時，Vue.js 也能完美地驅動複雜的單頁應用。
在配置環境之前呢，有些基礎的東西還是要和大家普及一下的.如果你已經對Vue.js有所瞭解，那請點選 配置步驟 跳轉到配置環境的閱讀，否則，請耐心看完看完。
首先，介紹一下Vue.js的概念，他是幹啥的呢？一定要配置vue的執行環境嗎？
如上述Vue.js不是個全能的框架，因為他的作用只聚焦在檢視層。可以理解為他是一個庫，是一個提供儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件。Vue.js 可以直接在html裡引用，也就是說直接引入他的js文件（如下圖），就可以在HTML檔案中新增vue.js指令了。
那既然如此簡單就可以完事，我們所謂的執行環境配置又是怎麼回事呢？是這樣的，使用npm引入是方便 包管理 。如果是初學者，職位練習vue的使用，那您大可不必配 置環境，因為只要匯入js就足夠了。但是，如果是以後要用到vue做專案的話，配置環境是必須的。當專案與後臺連結在一起時，需要匯入的檔案會很多，你總不能用到啥就導 入啥吧！這是就要用到 Node.js前端自動化的概念了。簡單的說就是，把你用到的東西打包匯入，我們只需要瞭解如何使用，其他的讓系統來做，讓前端開發更爽。
<script type="text/javascript" src="js/vue.js" ></script>
其次，介紹一下Node.js的概念，他又是幹啥的？為啥要安裝他？
Node.js是一個Javascript執行環境。實際上它是對Chrome V8引擎進行了封裝。Node 是一個伺服器端 JavaScript 直譯器，他會改變伺服器應該如何工作的概念。它的目標是幫助程式設計師構建高度可伸縮的應用程式，編寫能夠處理數萬條同時連線到一個物理機的連線程式碼。那直白的說，Node.js就是伺服器程式，是用來做後端的技術，不能直接用於前端開發。但是幹前端的學會了會更加的牛逼，對程式設計的思想和程式碼效率有很大的提升。Node大量使用時間驅動實現非同步開發，能夠高效的打通前後端，所以vue也是採用他作為配置環境，便於大型專案的開發。
那麼作為新手如何來搭建 Vue.js 的執行環境呢，請跟著我的流程走。
Vue.js的執行環境配置，主要分為3步：
1.安裝Node.js（JavaScript執行環境）
2.安裝Vue.js
3.搭建Vue-cli 建立專案
那現在開始正式安裝。
(1)首先，下載 Node.js，請點選 下載Node ，這裡根據你需要的配置下載即可，一般我們windows系統下載 Windows Installer (.msi) 64位的就好。下載完畢後，會有這樣的一個圖示
請點選此處輸入圖片描述
點選安裝，然後沒有什麼要特別注意的，直接下一步就可以，但是要知道你安裝的路徑，養成良好的習慣。
安裝完以後，開啟命令列（Windows+R）快捷鍵開啟cmd視窗，輸入 node -v ，如果出現版本號，那就安裝成功！
(2)接下來，安裝vue.js。因為 NPM 伺服器在國外，安裝速度慢，所以都使用淘寶的映象。注意，此步驟需要網路，請保持保持網路通暢。
開啟cmd命令框，輸入
npm install -g cnpm –registry=https://registry.npm.taobao.org
注意，安裝映象的時候會有大約1-2分鐘的事件，而且要保持網路通暢，要耐心等待。
當出現下圖代表這一步已經完成。
請點選此處輸入圖片描述
然後在命令框輸入 cnpm install vue ，這也需要一點點的時間，當出現下圖表示安裝成功了。
請點選此處輸入圖片描述
如果這兩步沒有異常就是整個vue的環境搭建成功了，如果不成功，請重複上述操作。
(3)搭建vue-cli
Vue-cli是vue官方提供的一個命令列工具（vue-cli），可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需一分鐘即可 啟動帶熱過載、儲存時靜態檢查以及可用於生產環境的構建配置的專案。這裡我們提供 vue-cli 建立專案的簡單步驟。
此時，你需要進入到你安裝Vue.js的資料夾，建立一個新的資料夾，這個隨意，別起中文名就好，比如說叫 VueTest。
這裡可能有朋友粗心又找不著了，可以嘗試到C盤，Users資料夾下管理員或非管理員資料夾下尋找。檢視有沒有這個 node_modules 的資料夾。找到以後，在命令列中 點到你的vue資料夾。
比如： cd myword/vue
這只是個例子，你要按照自己的檔案目錄來開啟。強調一下，最基礎的命令列指令要會， cd 是開啟那一層目錄的意思，有興趣的可以百度一下命令列的指令。諸如 windows、Linux等作業系統，這些指令基本都大差不差。
建好資料夾以後，進入到我們的 VueTest 資料夾
安裝webpack，開啟命令列工具輸入：
npm install webpack -g
如果成功 輸入 webpack -v 會提示版本資訊
在cmd命令框輸入
cnpm install -g vue-cli
將出現如下介面
請點選此處輸入圖片描述
在命令框內鍵入 vue ,將會看到如下描述:
請點選此處輸入圖片描述
然後在命令列鍵入 vue init webpack 專案名稱 ，將會有一大串關於你這個專案的配置，如圖所示
請點選此處輸入圖片描述
cd 命令進入建立的工程目錄，首先cd 自己建工程的名字；
安裝專案依賴：npm install，因為自動構建過程中已存在package.json檔案，所以這裡直接安裝依賴就行。
安裝 vue 路由模組 vue-router 和網路請求模組 vue-resource，輸入：cnpm install vue-router vue-resource --save。
啟動專案，輸入：npm run dev。服務啟動成功後瀏覽器會預設開啟一個“歡迎頁面”。
以上就是完整的搭建Vue.js專案的流程，若有錯誤之處希望朋友們能夠指正。