介紹
Vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架。
Vue只關(guān)注圖層菇用,采用自底向上增量開發(fā)的設(shè)計(jì)澜驮。
Vue的目標(biāo)是通過盡可能簡單的API實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
工具:
node.js環(huán)境(npm管理環(huán)境)
webpack打包工具
安裝node.js
從node官網(wǎng)下載并安裝node惋鸥,安裝步驟很簡單杂穷,只要一路“next”就可以了。
安裝完成后卦绣,打開命令行工具輸入命令node -v耐量,如果出現(xiàn)對(duì)應(yīng)版本號(hào),就說明安裝成功了滤港。
我們所需要的npm包管理器廊蜒,是集成在node中的,所以,直接輸入npm -v就會(huì)顯示出npm的版本信息山叮。
到這里node的環(huán)境已經(jīng)安裝完了,npm包管理工具也有了著榴,但是由于npm的有些資源被墻,為了更快更穩(wěn)定,所以我們需要切換到淘寶的npm鏡像——cnpm屁倔。
注意:安裝Vue依賴的時(shí)候脑又,盡量少用cnpm,因?yàn)榘惭b過程中可能丟失東西。
安裝webpack
直接在命令行輸入:
npm install webpack -g
安裝成功后點(diǎn)擊webpack -v,出現(xiàn)對(duì)應(yīng)版本號(hào)則安裝成功汰现。
Vue安裝
在用 Vue.js 構(gòu)建大型應(yīng)用時(shí)推薦使用 NPM 安裝挂谍,NPM 能很好地和諸如 Webpack 或 Browserify 模塊打包器配合使用。Vue.js 也提供配套工具來開發(fā)單文件組件瞎饲。
$ npm install vue
安裝vue-cli腳手架構(gòu)建工具
vue-cli 提供一個(gè)官方命令行工具口叙,可用于快速搭建大型單頁應(yīng)用。該工具提供開箱即用的構(gòu)建工具配置嗅战,帶來現(xiàn)代化的前端開發(fā)流程妄田。只需幾分鐘即可創(chuàng)建并啟動(dòng)一個(gè)帶熱重載、保存時(shí)靜態(tài)檢查以及可用于生產(chǎn)環(huán)境的構(gòu)建配置的項(xiàng)目:
$ cnpm install --global vue-cli
使用vue -v查看vue版本
創(chuàng)建一個(gè)基于webpack模板的新項(xiàng)目
vue init webpack 自定義項(xiàng)目名稱
注意:如果不想填直接回車默認(rèn)就好驮捍;項(xiàng)目的名稱不能大寫疟呐,不然會(huì)報(bào)錯(cuò)。
安裝項(xiàng)目所需的依賴
npm install
注意:如果一直報(bào)錯(cuò)的話东且,就多次安裝依賴
運(yùn)行項(xiàng)目
npm run dev