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項目的流程，若有錯誤之處希望朋友們能夠指正。

Vue.js 運行環境搭建詳解（基於windows的手把手安裝教學）及vue、node基礎知識普及