Vue.js做為目前前端最熱門的庫之一，為快速構建並開發前端項目多了一種思維模式。本文通過一個簡單的實例開始上手Vue.js開發。
一、技術准備
使用傳統mvc項目的開發人員，筆者建議在開始項目前，對以下兩個技術點進行了解。
1、 Vue.js基礎知識 Vue.js特點就是入門簡單，api 簡潔一致，文檔清晰。對於了解Html,CSS,JavaScript花幾個小時看一遍，就能掌握基礎的東西。 可參考http://www.runoob.com/vue2/vue-tutorial.html。
2、 ES6的模塊化加載 有ES6中，可以不使用SeaJS或者RequireJS，而直接使用import和export在瀏覽器中導入和導出各個模塊了， 具體使用參考http://www.cnblogs.com/diligenceday/p/5503777.html。
二、開發工具
工欲善其事必先利其器，開發Vue項目建議使用“屬於21世紀”的代碼編輯器——Atom，它開源免費而且是跨平台的，基於 WEB 技術（Chromium+Node.js）開發的，簡單理解的話編輯器本身其實是一個跑在本地的網頁，用戶可以用Javascript來編寫編輯器插件，缺點就是基於WEB導致性能不是很理想，但這不影響筆者對它的愛，Atom好用，而且有大量的高亮提示，語法插件可使用 ，當然你也可以通過安裝插件使用宇宙第一IDE-VisualStudio進行開發。使用Atom建議安裝以下插件。
1、minimap 讓你了解當前屏幕所處相對位置，如下圖App.Vue文件右側所示
2、git plus git管理插件
3、anguage-vue 在Atom中為Vue組件文件添加語法高亮和片段。
三、使用vue-cli快速開始模板項目
vue-cli：Vue.js腳手架，用於自動生成Vue.js項目相關文件，類似Visual Studio的MVC的模板項目。
1、安裝vue腳手架
cnpm install vue-cli -g
2、使用vue-cli初始化項目
在硬盤新建工程文件夾，在終端中使用cd命令進入該目錄
cd 目錄路徑 vue init webpack-simple first-vue
使用webpack打包項目，輸入項目名稱、描述、作者、是否使用sass后即在目錄下面生成了項目。
文件樹結構如下：
├─src // 開發目錄
│ ├─assets // 資源文件目錄，需要打包的放到該目錄下
│ │ ├─logo.png │ │ ├─App.vue // App.vue組件
│ ├─main.js // 預編譯入口
├─.babelrc // babel配置文件
├─.gitignore ├─index.html // 主頁
├─package.json // 項目配置文件
├─README.md ├─webpack.config.js // webpack配置文件
3、安裝項目依賴
進入項目目錄后使用npm或者cnpm(淘寶鏡像 ）安裝。
cd first-vue npm install
4、啟動項目
由於vue.js不支持ie8，建議默認瀏覽器使用chrome，自動啟動瀏覽器就會看到這個界面了。
npm run dev
5、發布項目
執行以下命令會生成發布時的build.js，並且是經過壓縮的。
npm run build
這時候會在目錄下生成dist文件夾和相關發布后的文件，由於使用的是webpack-simple方式打包，不會生成index.html文件，特別要注意的是index.html 加上 dist 不能采用 file 協議打開，必須使用 http 協議打開，並且需要放在 http 服務的 / 目錄下。拷貝index.html到dist文件文件夾並放在本地IIS目錄下，這樣就能訪問了。（關於webpack的詳細使用，建議學習專門的教程，打包的配置文件在webpack.conifg.js里面，這里暫時只要知道這樣用就行了）
四、給項目添加組件
通過前面的步驟，已經在本地跑起了一個簡單的項目，但這個項目還太簡單了，現在給它加點新的功能。
組件系統是Vue.js其中一個重要的概念，它提供了一種抽象，讓我們可以使用獨立可復用的小組件來構建大型應用，任意類型的應用界面都可以抽象為一個組件樹，例如常用的頂部條，底部菜單都就抽象成組件使用。
1、添加文件。在src目錄下新建components目錄，添加first-component.vue，template 寫 html，script寫 js，style寫樣式
<template>
<div id="firstcomponent">
<h1>標題</h1>
<a> 作者：{{ author }} </a>
</div>
</template>
<script type="text/javascript"> export default { data () { return { author: "ling" } } } </script>
<style>
</style>
2、引入。 打開App.vue，引入firstcomponent組件，並刪除vue-cli腳手架生成的一些無意義html。在<script></script>標簽內的第一行寫
<import firstcomponent from './components/firstcomponent.vue'>
3、注冊。在<script></script>標簽內的 data 代碼塊后面加上 components: { firstcomponent }。記得中間加英文逗號
export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App' } }, components: { firstcomponent } }
4、使用。在<template></template>內加上<firstcomponent></firstcomponent>
<template>
<div id="app">
<img src="./assets/logo.png">
<h2>{{msg}}</h2>
<firstcomponent></firstcomponent>
</div>
</template>
完成后的代碼：
在瀏覽器上打開 http://localhost:8080/ 頁面(之前打開過就會自動刷新)，這樣就成功在項目中添加了一個組件。
五、使用vue-router添加路由功能
實際項目中，由於不同模塊的划分，需要路由功能，使用vue-router為項目添加路由。注意: vue-router@2.x 只適用於 Vue 2.x 版本。
1、終端安裝 vue-router。
cnpm install vue-router --save
注意參數--save
--save 可以理解成生產環境，會把依賴包名稱添加到 package.json 文件 dependencies 鍵下，dependencies是運行時依賴。
--save-dev 則是開發環境， 添加到 package.json 文件 devDependencies 鍵下，devDependencies是開發時的依賴，如生產時不需要用到壓縮庫應該安裝到devDependencies 。
2、src下添加views目錄和頁面文件。在目錄下面新建兩個文件，view1.vue和view2.vue。
<template>
<div >
<h1>我是View1</h1>
<a> 我是View1 </a>
</div>
</template>
<script type="text/javascript"> export default { name: 'view1', } </script>
<style>
</style>
<template>
<div >
<h1>我是View2</h1>
<a> 我是View2</a>
</div>
</template>
<script type="text/javascript"> export default { name: 'view2', } </script>
<style>
</style>
3、引入並注冊 vue-router。添加router.js文件，這里添加了兩個路由，分別指向view1和view2。
import Vue from 'vue' import Router from 'vue-router' import View1 from './views/view1.vue' import View2 from './views/view2.vue' Vue.use(Router) export default new Router({ linkActiveClass: 'active', // 路由配置
routes: [ { path: '/view1', component: View1 }, { path: '/view2', component: View2 }, { path: '/*', component: View1 } ] })
至此，目錄結構如此
4、使用router。修改main.js，引入 router並指定當前vue實例
import Vue from 'vue' import App from './App.vue' import router from './router.js'
new Vue({ el: '#app', router, render: h => h(App) })
5、添加路由鏈接和出口。修改App.vue，添加鏈接和出口。
<router-link to="/view1">Go to view1</router-link>
<router-link to="/view2">Go to view2</router-link>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>
查看網站，點擊Go to view1和Go to view2，瀏覽器地址發生了改變，同時view1和view2的內容也渲染在了router-view
六、使用axios請求數據
至此，我們的項目實現了路由功能，但這些頁面的數據都是靜態的，下面我們使用axios庫來請求動態數據並展示出來。vue更新到2.0之后,作者就宣告不再對vue-resource更新,而是推薦的axios。
1、終端安裝axios
cnpm install axios --save
2、引入axios。修改main.js文件，添加 Vue.prototype.$ajax = axios ，引入axios。
import Vue from 'vue' import axios from 'axios' import App from './App.vue' import router from './router.js' Vue.prototype.$ajax = axios new Vue({ el: '#app', router, render: h => h(App) })
3、在視圖中請求數據。修改view1.vue的js，引入axios，請求服務器數據。
<script type="text/javascript"> import axios from 'axios' export default { name: 'view1', mounted: function() { axios.post('/jhb/getslides') .then(function (response) { console.log(response); }) .catch(function (response) { console.log(response); }); } } </script>
由於axios不支持跨域的jsonp請求，這里筆者使用本地webapi項目的接口數據進行測試，發布后拷貝到iis目錄中，如圖可以看到成功請求到了數據。
七、更多的Vue.js
至此，我們已經搭建了Vue.js開發環境並使用發布了一個功能簡單但羅完整項目，一些不太復雜的項目基本可以按步驟來實現。推薦一些優秀的vue.js庫來構建更復雜的工程。
Vuex：Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。
vue-lazyload：vue-lazyload 一個簡單易用的 Vue 圖片延遲加載插件 。
Element：一套為開發者、設計師和產品經理准備的基於 Vue 2.0 的組件庫，提供了配套設計資源，幫助你的網站快速成型。官網： http://element.eleme.io/#/en-US，github：https://github.com/ElemeFE/element。
更多實用的vue.js庫： http://www.cnblogs.com/huyong/p/6517949.html。
本文代碼已上傳至github：https://github.com/dreling8/vuejs-demo