1.如何簡單地使用Vue.js

如同以前我們學(xué)過的Jquery一樣，我們在程序中使用Vue.js時(shí)也可以使用直接引用的方法，直接下載并用?

標(biāo)簽引入，Vue.js會(huì)被注冊為一個(gè)全局變量。在這里有一個(gè)重要提示：在Vue.js的官網(wǎng)有兩個(gè)版本，開發(fā)版本和生產(chǎn)版本，我們在開發(fā)時(shí)應(yīng)用開發(fā)版本，遇到常見錯(cuò)誤它會(huì)給出相應(yīng)的警告。

當(dāng)然，和Jquery一樣，Vue.js也可以使用CDN的形式引用在代碼當(dāng)中。在bootcdn網(wǎng)站中直接復(fù)制代碼粘貼就可以了，簡單方便。

2.vue環(huán)境搭建

我們在用 Vue.js 構(gòu)建大型應(yīng)用時(shí)推薦使用 NPM 安裝， NPM 能很好地和諸如 Webpack 或Browserify 模塊打包器配合使用。 Vue.js 也提供配套工具來開發(fā)單文件組件。

Vue.js的推薦開發(fā)環(huán)境為Nodejs。npm:為Nodejs下的包管理器。由于國內(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/），我們可以在頁面最中間看到Download這個(gè)詞，選擇對應(yīng)的版本下載即可，建議下載后一個(gè)版本。也可以選擇下面的Other Downloads下載其他版本和Mac的版本。

image

下載完成后，使用傻瓜式安裝即可。安裝完成后可以先進(jìn)行下簡單的測試安裝是否成功了，后面還要進(jìn)行環(huán)境配置。在鍵盤按下【win+R】鍵，輸入cmd，然后回車，打開cmd窗口，輸入node

-v和npm

-v即可顯示當(dāng)前安裝的版本號(hào)，即表示安裝成功。新版的Node.js已自帶npm，npm的作用就是對Node.js依賴的包進(jìn)行管理，也可以理解為用來安裝以及卸載Node.js需要裝的東西。

image

（2）安裝cnpm

由于有些npm有些資源被屏蔽或者是國外資源的原因，經(jīng)常會(huì)導(dǎo)致用npm安裝依賴包的時(shí)候失敗，因此要么FQ要么就使用國內(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檢測，當(dāng)顯示下圖時(shí)為安裝成功。

image

（3）安裝vue-cli

vue-cli是一種全局腳手架用于幫助搭建所需的模板框架，同理在cmd中輸入命令:npm install -g

vue-cli。在這一段代碼中-g是為了全局使用的意思。與cnpm樣，安裝完成后會(huì)顯示一長串的文件，輸入 vue

-v可以查看vue版本。此時(shí)，環(huán)境已經(jīng)基本搭建成功。

　　（4）測試，創(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)用，熱加載可以讓我們在修改完代碼后不用手動(dòng)刷新瀏覽器就能實(shí)時(shí)看到修改后的效果。

這里簡單介紹下 npm run dev 命令，其中的“run”對應(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ù)完成。