vue入門之路篇系列教程： 
vue最簡單的入門教程+實戰+Vue2+VueRouter2+webpack（一） 
vue最簡單的入門教程+實戰+Vue2+VueRouter2+webpack（二） 
vue最簡單的入門教程+實戰+Vue2+VueRouter2+webpack（三） 
vue最簡單的入門教程+實戰+Vue2+VueRouter2+webpack（四） 
vue最簡單的入門教程+實戰+Vue2+VueRouter2+webpack（五）

這幾年前端發生了日新月異的變化，各種框架層出不窮，滿目琳琅，本人由於工作需要開始了深入的接觸其中的一個框架—

VUE，由於框架是基於前端最基礎的東西的昇華，所以在掌握各種框架前，個人希望還是有諸如CSS，HTML5，JS這些基礎的中級前端知識。順帶提一句我本人是在linux環境下，使用atom編輯器進行開發的，所以這裡我也已這種環境作為教程環境。同時採用Vue2+VueRouter2+webpack方式來構建專案實戰。

一、VUE簡介

既然提到VUE大家一定很疑問VUE到底是個什麼框架？它可以幹什麼？

Vue.js（讀音 /vjuː/, 類似於 view） 是一套構建使用者介面的漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注檢視層，它非常容易學習，非常容易與其它庫或已有專案整合。另一方面，Vue 完全有能力驅動採用單檔案元件和 Vue 生態系統支援的庫開發的複雜單頁應用。

Vue.js 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件。 
Vue.js 是用於構建互動式的 Web 介面的庫。 
Vue.js 提供了 MVVM 資料繫結和一個可組合的元件系統，具有簡單、靈活的 API。

Vue.js 特點

• 簡潔： HTML 模板 + JSON 資料，再建立一個 Vue 例項，就這麼簡單。
• 資料驅動： 自動追蹤依賴的模板表示式和計算屬性。
• 元件化： 用解耦、可複用的元件來構造介面。
• 輕量： ~24kb min+gzip，無依賴。
• 快速： 精確有效的非同步批量 DOM 更新。
• 模組友好： 通過 NPM 或 Bower 安裝，無縫融入你的工作流。

如果你喜歡下面這些，那你一定會喜歡 Vue.js：

• 可擴充套件的資料繫結機制
• 原生物件即模型
• 簡潔明瞭的 API
• 元件化 UI 構建
• 多個輕量庫搭配使用

二、入題

扯了一些官方的簡介廢話，大家還是有點懵，對於新手來說，這樣的敘述簡直不能理解，本人傾向與“需求產生疑問，疑問產生答案”的教程方式。

於是需求來了，我們要用VUE框架，VUE框架有什麼附帶環境呢？VUE還需要與其他什麼東西合起來開發嗎？或者說成VUE+什麼。

VUE在日常開發中需要nodejs+npm環境，就是你先要安裝npm。如果你有使用過node，並安裝過npm，可以跳過這一步。詳情參考：nodejs

安裝好nodejs之後，在終端下面輸入命令node -v會有版本號出來。就說明安裝成功了。輸入npm -v也會有版本號出來，就說明，npm也已經安裝好了。

同時本人在開發中採用Vue2+VueRouter2+webpack構建專案，如果你是新手可以不需要知道webpack是什麼，有興趣可以自己查查，這裡只是簡要說明是使用什麼構建專案的。

為了在學習過程中便於查詢資料，一定要準備好翻牆工具，至於怎麼翻牆我就不說了。

宣告:以下內容有些地方參考了我師傅的部落格，大家可以去這裡檢視詳情：Vue2+VueRouter2+webpack 構建專案實戰

三、vue-cil構建專案

vue-cil構建專案：官網的介紹

vue-cil是vue的腳手架工具。其模板可以通過 vuejs-templates 來檢視。我們不需要知道它究竟是什麼，只需要知道它是一個工具幫助我們輔助開發，而我們所要做的就是安裝上它，來方便我們的開發。

下面，我們來用vue-cil構建一個專案。

首先，我們在終端中把當前目錄定位到你準備存放專案的地方。即自己定義的一個目錄下面，這裡我的定位目錄的命令如下：

$ cd ~/project/MyWork

定位後，我們開啟VUE官網的安裝，下拉到命令列工具，如下圖： 

我們首先需要安裝vue-cil。我們照著官網的命令列直接在命令埠輸入命令就行，細節如下：（linux和window通用）

npm install -g vue-cli 或者官網的： $ npm install –global vue-cli

這個命令是全域性安裝vue-cli的意思，只需要執行一次就可以了。安裝上之後，以後就不用安裝了。

webpack初始化你的專案：

$ vue init webpack vuedemo(你的專案名)

輸入這個命令之後，會出現一些提示，以及詢問，如下：(再次宣告我的系統是linux)

你大可以一路按回車即可。

之後，再定位到你新建的專案名：

$ cd vuedemo

安裝依賴：

$ npm install (說明： 安裝)

執行npm install需要一點時間，因為會從伺服器上下載程式碼啦之類的。並且在執行過程中會有一些警告資訊。不用管，等著就是了。如果長時間沒有響應，就ctrl+c停止掉，然後再執行一次即可。如果還是照樣，建議檢查是不是因為沒有翻牆的原因，或者，把npm源換成國內，一般是換成淘寶的，如下：

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

安裝完成後，終端如圖：

最後，執行下面一句，把專案跑起來，走你：

$ npm run dev (說明： 執行)

執行後，終端如圖：

如上：四行命令，就可以把一個名為vuedemo的專案跑起來。當然，這個名字你是可以隨便起的，根據你的實際專案來定。

好，通過上面的這些命令，我們就實現了新建一個vue+webpack的專案。在運行了npm run dev之後，會自動開啟一個瀏覽器視窗，就可以看到實際的效果了。

至此，我們執行並跑起來了VUE的預設專案。

小結：

我是強烈建議學習前端的同學整Linux學習。如果你又不用linux，那麼沒辦法了，可以使用windows。但是windows下面的cmd工具，不得不說確實對於開發來說並不好使用，如果你一定要用，我也建議大家在windows上一定安裝一款分散式版本控制系統軟體：Git。只要有這個，在任意資料夾右擊選單，在選單中點選git bash here 選單，然後可以開啟一個類似於終端的面板，這裡支援一些linux的常用的命令，包括vim工具都有。雖然介面是醜了點，但是比cmd要好用。

末了附上對師傅的敬意和git學習網站（雖說我覺得沒用）：Git教程 - 廖雪峰的官方網站

提示：後面還有精彩敬請期待，請大家關注我的CSDN博文：儂姝沁兒，或者我的簡書專題：web前端。如有意見可以進行評論，每一條評論我都會認真對待。