1.如何簡(jiǎn)單地使用Vue.js
如同以前我們學(xué)過的Jquery一樣铭乾，我們?cè)诔绦蛑惺褂肰ue.js時(shí)也可以使用直接引用的方法，直接下載并用?
標(biāo)簽引入娃循，Vue.js會(huì)被注冊(cè)為一個(gè)全局變量炕檩。在這里有一個(gè)重要提示：在Vue.js的官網(wǎng)有兩個(gè)版本，開發(fā)版本和生產(chǎn)版本捌斧，我們?cè)陂_發(fā)時(shí)應(yīng)用開發(fā)版本笛质，遇到常見錯(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 也提供配套工具來開發(fā)單文件組件色冀。
Vue.js的推薦開發(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
打開Nodejs的官網(wǎng)（https://nodejs.org/en/），我們可以在頁(yè)面最中間看到Download這個(gè)詞嘉抓，選擇對(duì)應(yīng)的版本下載即可索守，建議下載后一個(gè)版本。也可以選擇下面的Other Downloads下載其他版本和Mac的版本抑片。
image
下載完成后卵佛，使用傻瓜式安裝即可。安裝完成后可以先進(jìn)行下簡(jiǎn)單的測(cè)試安裝是否成功了敞斋，后面還要進(jìn)行環(huán)境配置截汪。在鍵盤按下【win+R】鍵，輸入cmd植捎，然后回車衙解，打開cmd窗口，輸入node
-v和npm
-v即可顯示當(dāng)前安裝的版本號(hào)焰枢，即表示安裝成功蚓峦。新版的Node.js已自帶npm，npm的作用就是對(duì)Node.js依賴的包進(jìn)行管理济锄，也可以理解為用來安裝以及卸載Node.js需要裝的東西枫匾。
image
（2）安裝cnpm
由于有些npm有些資源被屏蔽或者是國(guó)外資源的原因，經(jīng)常會(huì)導(dǎo)致用npm安裝依賴包的時(shí)候失敗拟淮，因此要么FQ要么就使用國(guó)內(nèi)鏡像cnpm干茉。打開https://npm.taobao.org/，我們可以了解到這是一個(gè)完整npmjs.org鏡像很泊，可以用此代替官方版本(只讀)角虫，同步頻率目前為 10分鐘 一次以保證盡量與官方服務(wù)同步。
同樣在命令行中輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org然后等待委造。
image
安裝完成之后戳鹅，我們輸入cnpm -v檢測(cè)，當(dāng)顯示下圖時(shí)為安裝成功昏兆。
image
（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)目文件夾名)妓忍。
image
此處以及以后的設(shè)置可以輸入，也可以直接按回車和N愧旦。
image
這樣世剖，第一個(gè)Vue.js項(xiàng)目就創(chuàng)建完成。打開相應(yīng)的存儲(chǔ)地址就會(huì)看到這個(gè)文件笤虫，我的放在可user/倫倫/的下面搁廓。
image
通過輸入cd? my-first-demo就可以進(jìn)入目錄具體文件夾命令行中輸入：cnmp install或者npm
install安裝依賴包。重新打開路徑下的文件夾耕皮，我們可以看到文件夾中比之前的文件夾多了一個(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)打開localhost:8080（如果瀏覽器沒有自動(dòng)打開，可以手動(dòng)輸入）阻逮。運(yùn)行成功后粱快，會(huì)看到如下所示的界面。此時(shí)叔扼，任務(wù)完成事哭。
