一魄幕、背景與目的
1.1 項(xiàng)目相關(guān)
原項(xiàng)目是一個(gè)基于AngularJS構(gòu)建的工程——直接復(fù)用其他項(xiàng)目的代碼——由于對(duì)AngularJS所知不多（而且AngularJS學(xué)習(xí)成本相對(duì)較高）躏救，雖然可以照葫蘆畫瓢完成一定的功能開(kāi)發(fā)掷贾，但是靈活性卻差了很多，而且一些非功能性的bug也解決不了想帅。
Others：控制臺(tái)又打不開(kāi)了...
Me：我看看，嗯，這個(gè)是AngularJS的問(wèn)題旨剥，重新輸入U(xiǎn)RL刷新一下就好了咧欣；
Others：把這個(gè)問(wèn)題解決一下唄，每次都要重新搞一下...
Me：額轨帜，這個(gè)不會(huì)解呀！（好尷尬呀...）
----------------------------------------------------------------------------------
Others：控制臺(tái)出問(wèn)題了蚌父，全是亂碼...
Me：我看看，嗯苟弛，這個(gè)不是亂碼，是代碼直接顯示了右遭，應(yīng)該是AngularJS的問(wèn)題缤削，清一下緩存就可以了窘哈；
Others：這個(gè)問(wèn)題一定要解決的吧亭敢，都亂碼了...
Me：這個(gè)不是亂碼，額满哪，這個(gè)也不會(huì)解呀Ｈ芭瘛（好尷尬呀...）
如此場(chǎng)景出現(xiàn)太多民宿，作為一位開(kāi)發(fā)娇妓，總會(huì)有不好意思的時(shí)候活鹰！
1.2 技術(shù)相關(guān)
Vue太火，不解釋着绷！
Vue相對(duì)比較簡(jiǎn)單锌云，不解釋！
Vue和AngularJS一樣，有對(duì)應(yīng)的路由系統(tǒng)彬向，比較適合開(kāi)發(fā)單頁(yè)面應(yīng)用（后臺(tái)控制系統(tǒng)是典型的單頁(yè)面應(yīng)用）
二兼贡、起步——了解Vue語(yǔ)法
Vue的學(xué)習(xí)和JS的學(xué)習(xí)其實(shí)并沒(méi)有太大的區(qū)別：
第一階段學(xué)習(xí)完基礎(chǔ)的語(yǔ)法就可以出發(fā)了娃胆；
第二階段學(xué)習(xí)使用一些三方工具或者三方庫(kù)來(lái)快速開(kāi)發(fā)；
第三階段需要學(xué)會(huì)使用一些模塊化的開(kāi)發(fā)凿蒜，重構(gòu)提煉更多的公共代碼胁黑；
第四階段學(xué)會(huì)能夠使用一些比較高級(jí)的語(yǔ)法或技巧來(lái)更簡(jiǎn)潔的完成功能開(kāi)發(fā)；
第五階段成為能夠提供好的三方庫(kù)組織中的一員虱饿。
了解Vue有3個(gè)月了触趴，目前第二階段末尾和第三階段開(kāi)始氮发。
2.1 官網(wǎng)教程筆記
基礎(chǔ)語(yǔ)法的學(xué)習(xí)冗懦，直接官網(wǎng)就可以，這里只是一個(gè)小小的大綱颈畸，詳情請(qǐng)移步Vue官網(wǎng)：http://cn.vuejs.org/v2/guide/index.html 没讲。
2.1.1 基礎(chǔ)
1、Vue.js 的核心是一個(gè)允許采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式的將數(shù)據(jù)渲染進(jìn) DOM;
2徙缴、雙向數(shù)據(jù)綁定嘁信；
3、組件化潘靖；
-------------------------------------------------------------------
4、Vue實(shí)例的屬性和方法糊余；（data秀又、method）
5啄刹、Vue實(shí)例的聲明周期；（mounted）
-------------------------------------------------------------------
6袱讹、模板語(yǔ)法：
6.1昵时、文本：插值{{}}、v-html救巷；
6.2句柠、屬性：v-bind:浦译、:溯职；
6.3、指令叹俏、修飾符僻族、過(guò)濾器；
6.4述么、常用指令：v-bind:class、v-bind:style籽前、v-module敷钾、v-if肄梨、v-show、v-for众羡、v-on:click；
-------------------------------------------------------------------
7羊壹、計(jì)算屬性；（computed油猫、watch）
-------------------------------------------------------------------
8情妖、組件：
8.1 全局注冊(cè)；
8.2 局部注冊(cè)毡证；
8.3 模板解析is；
8.4 父子組件：props down, events up 丐箩；
8.5 內(nèi)容分發(fā)：slot恤煞；
8.6 組件三部分：
8.6.1 Props 允許外部環(huán)境傳遞數(shù)據(jù)給組件
8.6.2 Events 允許組件觸發(fā)外部環(huán)境的副作用
8.6.3 Slots 允許外部環(huán)境將額外的內(nèi)容組合在組件中
三、Hello World
其實(shí)在學(xué)習(xí)Vue基礎(chǔ)的過(guò)程中阱州，就應(yīng)該完成了Hello World的過(guò)程，然而這里強(qiáng)調(diào)Hello World主要基于兩個(gè)方面：
1犀概、Vue中Hello World的真意
1.1 通過(guò)Hello World學(xué)習(xí)實(shí)踐基本語(yǔ)法以及寫法夜惭；
1.2 用最簡(jiǎn)單的代碼完成最簡(jiǎn)單最單一的功能；（區(qū)別于vue-cli）
2诈茧、腳手架Vue-cli
絕大多數(shù)人剛開(kāi)始接觸Vue敢会，便走上了Vue-cli搭建項(xiàng)目的道路主要基于幾個(gè)方面的原因：
2.1 Vue-cli作為官方腳手架，太容易從官網(wǎng)中脫穎而出鸥昏；
2.2 大型項(xiàng)目用腳手架搭建比較方便；
2.3 而小項(xiàng)目其實(shí)也沒(méi)有太大的必要用Vue了障涯；
2.4 對(duì)于基于有成的（馬上做項(xiàng)目）來(lái)說(shuō)，直接進(jìn)入腳手架的節(jié)奏更快一些唯蝶。
至于Vue-cli的具體操作:
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev
四鼓蜒、更多期待——
基于Vue移植構(gòu)建后臺(tái)控制系統(tǒng)（二）——Vue全家桶涂滴。
