介紹
Vue.js是一套構(gòu)建用戶(hù)界面的漸進(jìn)式框架。
Vue 只關(guān)注視圖層峻仇，采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)公黑。
Vue 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
閱讀之前需要了解的知識(shí)
- htnl
- css
- javascript
- node.js環(huán)境(npm包管理工具）
- webpack打包工具
安裝node.js
從node官網(wǎng)下載并安裝node摄咆，安裝步驟很簡(jiǎn)單凡蚜，只要一路“next”就可以了。
安裝完成后吭从，打開(kāi)命令行工具輸入命令node -v朝蜘，如下圖，如果出現(xiàn)對(duì)應(yīng)版本號(hào)涩金，就說(shuō)明安裝成功了谱醇。
[圖片上傳失敗...(image-8d368c-1528899772328)]
我們所需要的npm包管理器，是集成在node中的步做，所以副渴，直接輸入npm -v就會(huì)如下圖所示，顯示出npm的版本信息全度。
[圖片上傳失敗...(image-c68528-1528899772327)]
到這里node的環(huán)境已經(jīng)安裝完了,npm包管理工具也有了煮剧，但是由于npm的有些資源被墻，為了更快更穩(wěn)定,所以我們需要切換到淘寶的npm鏡像——cnpm。
安裝cnpm
點(diǎn)擊進(jìn)入淘寶的cnpm網(wǎng)站,里面有詳細(xì)的配置方法轿秧。
或者直接在命令行輸入：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
然后等待中跌，安裝完成。
輸入cnpm -v菇篡，可以查看當(dāng)前cnpm版本漩符，這個(gè)和npm的版本還是不一樣的。
[圖片上傳失敗...(image-c3a1e7-1528899772327)]
使用cnpm的方法就是驱还，需要用到npm的地方直接使用cnpm替換就可以了
vue安裝
在用 vue.js 構(gòu)建大型應(yīng)用時(shí)推薦使用 npm 安裝嗜暴，npm 能很好地和諸如 webpack 或 browserify 模塊打包器配合使用。vue.js 也提供配套工具來(lái)開(kāi)發(fā)單文件組件议蟆。
$ cnpm install vue
安裝vue-cli腳手架構(gòu)建工具
vue-cli 提供一個(gè)官方命令行工具闷沥，可用于快速搭建大型單頁(yè)應(yīng)用。該工具提供開(kāi)箱即用的構(gòu)建工具配置咐容，帶來(lái)現(xiàn)代化的前端開(kāi)發(fā)流程舆逃。只需幾分鐘即可創(chuàng)建并啟動(dòng)一個(gè)帶熱重載、保存時(shí)靜態(tài)檢查以及可用于生產(chǎn)環(huán)境的構(gòu)建配置的項(xiàng)目：
# 全局安裝 vue-cli
$ cnpm install --global vue-cli
創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
要?jiǎng)?chuàng)建項(xiàng)目戳粒，首先我們要選定目錄路狮，然后再命令行中把目錄轉(zhuǎn)到選定的目錄∥翟迹可以使用：
#my-project為自定義項(xiàng)目名
$ vue init webpack my-project
初始化一個(gè)項(xiàng)目奄妨，或使用
$ vue init webpack-simple my-project
初始化一個(gè)簡(jiǎn)單的項(xiàng)目
[圖片上傳失敗...(image-ab0a7a-1528899772326)]
[圖片上傳失敗...(image-159e60-1528899772326)]
運(yùn)行初始化命令的時(shí)候回讓用戶(hù)輸入幾個(gè)基本的選項(xiàng)，如項(xiàng)目名稱(chēng)苹祟，描述砸抛，作者等信息，如果不想填直接回車(chē)默認(rèn)就好树枫。
[圖片上傳失敗...(image-a1edd2-1528899772326)]
需要注意的是項(xiàng)目的名稱(chēng)不能大寫(xiě)直焙，不然會(huì)報(bào)錯(cuò)。
Project name (my-project) # 項(xiàng)目名稱(chēng)（我的項(xiàng)目）
Project description (A Vue.js project) # 項(xiàng)目描述一個(gè)Vue.js 項(xiàng)目
Author 作者（你的名字）
Install vue-router? (Y/n) # 是否安裝Vue路由团赏，也就是以后是spa（但頁(yè)面應(yīng)用需要的模塊）
Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代碼箕般？ （Y [ yes ] / N [ no ]）
Pick an ESLint preset (Use arrow keys) # 選擇一個(gè)預(yù)置ESLint（使用箭頭鍵）
Setup unit tests with Karma + Mocha? (Y/n) # 設(shè)置單元測(cè)Karma + Mocha耐薯？ （Y/ N）
Setup e2e tests with Nightwatch? (Y/n) # 設(shè)置端到端測(cè)試舔清，Nightwatch？ （Y/ N）
當(dāng)然這些都看你自己個(gè)人的情況曲初，我這里是全選了是体谒。
安裝項(xiàng)目所需要的依賴(lài)
剛初始化的項(xiàng)目是沒(méi)有依賴(lài)的，如果運(yùn)行會(huì)報(bào)類(lèi)似這樣的錯(cuò)誤臼婆，
[圖片上傳失敗...(image-535793-1528899772326)]
所以在這之前需要解決項(xiàng)目的依賴(lài)問(wèn)題抒痒，使用下面的命令安裝項(xiàng)目的依賴(lài)。
$ cnpm install
如果出現(xiàn)如下圖情況颁褂，說(shuō)明依賴(lài)解決成功故响。
[圖片上傳失敗...(image-fcc535-1528899772326)]
運(yùn)行項(xiàng)目
$ cnpm run dev
[圖片上傳失敗...(image-f8da7b-1528899772324)]
如果看到這個(gè)界面傀广，說(shuō)明配置成功
