Vue.js是一套構(gòu)建用戶界面的UI框架孔祸，它專注于MVVM模型的ViewModel層症副，通過雙向數(shù)據(jù)綁定把View層和Model層鏈接起來暂论。
它有如下特點：
- 漸進式框架六孵，采用自底向上增量開發(fā)設(shè)計
- 模板雙向綁定機制
- 利用指令（directive）對DOM進行封裝
-
組件化設(shè)計思想
如下圖，將UI頁面分割為若干組件進行組合和嵌套太援。
組件化.png
圍繞Vue.js框架闽晦，涉及到的常用技術(shù)/插件有：
1. vue-cli
快速構(gòu)建vue項目的腳手架工具，使用方式如下：
安裝并構(gòu)建項目
1. npm install -g vue-cli
2. 選擇簡單模板搭建vue項目：vue init webpack-simple my-webpack-simple-demo
3. 選擇webpack（略復雜）模板搭建vue項目: vue init webpack my-webpack-demo
建立好項目之后提岔，如下啟動：
1. npm install
2. npm run dev
3. 打開游覽器訪問localhost:8080
如果在發(fā)布環(huán)境仙蛉，需要生成build文件，運行命令npm run build碱蒙。
2. npm, webpack, babel, es6
Vue開發(fā)中荠瘪，會用到很多依賴包，傳統(tǒng)方式是用<script>標簽引入赛惩，但是哀墓，在大型項目中更推薦使用npm安裝。npm能夠很好得和webpack等模塊打包器配合使用喷兼。同時篮绰，vue提供單文件組件開發(fā)模式，這樣季惯，更需要webpack的配合吠各，對.vue文件進行解析編譯。
Vue中推薦使用ES6語法星瘾，這就需要編碼器Babel的協(xié)助走孽，而webpack對Babel支持良好，因此琳状，webpack的重要性不言而喻磕瓷，圍繞著它，可以支持眾多功能。
3. vue-router
Vue非常適合單頁面（SPA）應用開發(fā)困食，而單頁面應用的核心是路由和模板边翁。Vue核心庫本身提供模板機制（mushtache），路由支持則由第三方庫vue-router提供（Vue-router 2.0- 中文文檔）硕盹。
這充分體現(xiàn)出Vue的“增量式開發(fā)設(shè)計”：Vue.js只提供核心功能符匾，其他輔助功能由第三方庫支持。
4. axios
Vue更新到2.0之后瘩例，作者就宣告不再對vue-resource更新啊胶，而是推薦axios。axios 是一個基于 promise 的 HTTP 庫垛贤，可以用在瀏覽器和 node.js 中焰坪。
由于axios并不是針對vue框架開發(fā)的，因此聘惦，如果將其使用在vue框架中某饰，建議如下配置：
import Vue from 'vue';
import axios from 'axios';
...
Vue.prototype.$http = axios;
使用：
this.$http.post(url, data).then((response) => {...});
5. Vuex
Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)善绎，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化黔漂。
Vue父子組件是單向通信的，由父組件向子組件傳遞數(shù)據(jù)禀酱。如果子組件要改變父組件狀態(tài)炬守，或者組件間有通信，那么剂跟，需要采用事件emit劳较。但是，一旦組件數(shù)量龐大起來浩聋，通信更加復雜，那么臊恋，事件監(jiān)聽模式就顯得散亂衣洁，無秩序，無法統(tǒng)一管理抖仅。這時坊夫，需要Vuex集中存儲組件狀態(tài)，并更新組件撤卢。
6. UI庫
支持Vue2.0的UI庫很多环凿，可以去網(wǎng)上搜搜。筆者推薦兩個：
7. 調(diào)試工具
Vue有基于chrome插件的調(diào)試工具：https://github.com/vuejs/vue-devtools
注意：一定要在vue項目中開啟debugger模式放吩，才能激活該調(diào)試工具：
Vue.config.devtools = true;
小結(jié)
注意智听，Vue.js 不支持 IE8 及其以下版本，因為 Vue.js 使用了 IE8 不能實現(xiàn)的 ECMAScript 5 特性Object.defineProperty()。
如何配置Vue項目到推，可以參考文章《詳解基于Vue2.0項目的webpack配置文件》考赛。
下一節(jié)：Vue入門系列（二）Vue實例和組件
更多高階內(nèi)容，可移步《小專欄-娜姐聊前端》莉测。
