一、簡(jiǎn)介
我個(gè)人理解,Vue.js是一套前端視圖層的框架,它只關(guān)心視圖展示和數(shù)據(jù)綁定,它的一些語(yǔ)法與Angular 1非常相似,如果有Angular 1相關(guān)的使用經(jīng)驗(yàn),上手會(huì)非常快。
相比較其他的React、Angular 2等MVVM框架,它更加的輕量,效率也更高,也能更好的與其他庫(kù)集成。
它擁有以下幾個(gè)出色的特性:
數(shù)據(jù)雙向綁定
指令
模板
組件
當(dāng)前最新的版本為2.1.4。后續(xù)也會(huì)在這個(gè)版本下演示Demo。
二、環(huán)境準(zhǔn)備
下載安裝Node.js環(huán)境,安裝成功后在命令行窗口依次執(zhí)行以下命令:
> npm install bower -g> npm install express-generator -g
安裝完成后進(jìn)入工程目錄(隨意新建一個(gè)目錄),依次執(zhí)行以下命令,創(chuàng)建一個(gè)名為vue-demo的項(xiàng)目:
1 > express vue-demo --view=ejs2 > cd vue-demo3 > npm install4 > bower init5 > bower install requirejs --save6 > bower install vue --save
所有命令執(zhí)行成功后,在項(xiàng)目根目錄手動(dòng)增加一個(gè)名為.bowerrc文件,內(nèi)容如下
1 {2 "directory": "public/plugins/"3 }
為了后面顯示的demo頁(yè)面好看一點(diǎn),再引入bootstrap。這步不是必須的
> bower install bootstrap --save
最終的目錄結(jié)構(gòu)如下