Vue.js 運行環境搭建詳解（基於windows的手把手安裝教學）

　　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項目的流程，如有錯誤之處但願朋友們可以指正。