1.如何簡(jiǎn)單地使用Vue.js
如同以前我們學(xué)過(guò)的Jquery一樣肮砾，我們?cè)诔绦蛑惺褂肰ue.js時(shí)也可以使用直接引用的方法遗嗽，直接下載并用 <script> 標(biāo)簽引入蘸秘，Vue.js會(huì)被注冊(cè)為一個(gè)全局變量裹芝。在這里有一個(gè)重要提示：在Vue.js的官網(wǎng)有兩個(gè)版本恨搓，開(kāi)發(fā)版本和生產(chǎn)版本院促，我們?cè)陂_(kāi)發(fā)時(shí)應(yīng)用開(kāi)發(fā)版本，遇到常見(jiàn)錯(cuò)誤它會(huì)給出相應(yīng)的警告斧抱。
當(dāng)然常拓，和Jquery一樣，Vue.js也可以使用CDN的形式引用在代碼當(dāng)中夺姑。在bootcdn網(wǎng)站中直接復(fù)制代碼粘貼就可以了墩邀，簡(jiǎn)單方便。
2.vue環(huán)境搭建
我們?cè)谟?Vue.js 構(gòu)建大型應(yīng)用時(shí)推薦使用 NPM 安裝盏浙， NPM 能很好地和諸如 Webpack 或Browserify 模塊打包器配合使用眉睹。 Vue.js 也提供配套工具來(lái)開(kāi)發(fā)單文件組件。
Vue.js的推薦開(kāi)發(fā)環(huán)境為Nodejs废膘。npm:為Nodejs下的包管理器竹海。由于國(guó)內(nèi)使用npm會(huì)很慢,這里推薦使用淘寶NPM鏡像（其網(wǎng)址為http://npm.taobao.org/）。我們使用webpack進(jìn)行資源的合并和打包以及使用vue-cli進(jìn)行用戶生成Vue工程模板丐黄。
那么斋配，我們著重的講解一下如何搭建一個(gè)合適的環(huán)境。
（1）如何安裝Nodejs
打開(kāi)Nodejs的官網(wǎng)（https://nodejs.org/en/），我們可以在頁(yè)面最中間看到Download這個(gè)詞艰争，選擇對(duì)應(yīng)的版本下載即可坏瞄，建議下載后一個(gè)版本。也可以選擇下面的Other Downloads下載其他版本和Mac的版本甩卓。
下載完成后鸠匀，使用傻瓜式安裝即可。安裝完成后可以先進(jìn)行下簡(jiǎn)單的測(cè)試安裝是否成功了逾柿，后面還要進(jìn)行環(huán)境配置缀棍。在鍵盤(pán)按下【win+R】鍵，輸入cmd机错，然后回車(chē)爬范，打開(kāi)cmd窗口，輸入node -v和npm -v即可顯示當(dāng)前安裝的版本號(hào)弱匪，即表示安裝成功青瀑。新版的Node.js已自帶npm，npm的作用就是對(duì)Node.js依賴的包進(jìn)行管理痢法，也可以理解為用來(lái)安裝以及卸載Node.js需要裝的東西狱窘。
（2）安裝cnpm
由于有些npm有些資源被屏蔽或者是國(guó)外資源的原因杜顺，經(jīng)常會(huì)導(dǎo)致用npm安裝依賴包的時(shí)候失敗财搁，因此要么FQ要么就使用國(guó)內(nèi)鏡像cnpm。打開(kāi)https://npm.taobao.org/躬络，我們可以了解到這是一個(gè)完整npmjs.org 鏡像尖奔，可以用此代替官方版本(只讀)，同步頻率目前為 10分鐘 一次以保證盡量與官方服務(wù)同步穷当。
同樣在命令行中輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待提茁。
安裝完成之后，我們輸入cnpm -v檢測(cè)馁菜，當(dāng)顯示下圖時(shí)為安裝成功茴扁。
（3）安裝vue-cli
vue-cli是一種全局腳手架用于幫助搭建所需的模板框架，同理在cmd中輸入命令:npm install -g vue-cli汪疮。在這一段代碼中-g是為了全局使用的意思峭火。與cnpm樣，安裝完成后會(huì)顯示一長(zhǎng)串的文件智嚷，輸入 vue -v可以查看vue版本卖丸。此時(shí)，環(huán)境已經(jīng)基本搭建成功盏道。
∩越（4）測(cè)試，創(chuàng)建第一個(gè)Vue.js項(xiàng)目
在命令行中輸入：vue init webpack my-first-demo(項(xiàng)目文件夾名)。
此處以及以后的設(shè)置可以輸入衅枫，也可以直接按回車(chē)和N嫁艇。
這樣，第一個(gè)Vue.js項(xiàng)目就創(chuàng)建完成弦撩。打開(kāi)相應(yīng)的存儲(chǔ)地址就會(huì)看到這個(gè)文件裳仆，我的放在可user/倫倫/的下面。
通過(guò)輸入cd my-first-demo就可以進(jìn)入目錄具體文件夾命令行中輸入：cnmp install或者npm install安裝依賴包孤钦。重新打開(kāi)路徑下的文件夾歧斟，我們可以看到文件夾中比之前的文件夾多了一個(gè)node_modules文件夾，到此腳手架安裝完成偏形。
（5）在命令行中里輸入：npm run dev静袖。
此命令會(huì)用熱加載的方式運(yùn)行我們的應(yīng)用，熱加載可以讓我們?cè)谛薷耐甏a后不用手動(dòng)刷新瀏覽器就能實(shí)時(shí)看到修改后的效果俊扭。
這里簡(jiǎn)單介紹下 npm run dev 命令队橙，其中的“run”對(duì)應(yīng)的是package.json文件中，scripts字段中的dev萨惑，也就是 node build/dev-server.js命令的一個(gè)快捷方式捐康。項(xiàng)目運(yùn)行成功后，瀏覽器會(huì)自動(dòng)打開(kāi)localhost:8080（如果瀏覽器沒(méi)有自動(dòng)打開(kāi)庸蔼，可以手動(dòng)輸入）解总。運(yùn)行成功后，會(huì)看到如下所示的界面姐仅。此時(shí)花枫，任務(wù)完成。
