1.如何簡單地使用Vue.js
如同以前我們學過的Jquery一樣,我們在程序中使用Vue.js時也可以使用直接引用的方法猖辫,直接下載并用
標簽引入酥泞,Vue.js會被注冊為一個全局變量。在這里有一個重要提示:在Vue.js的官網有兩個版本啃憎,開發(fā)版本和生產版本芝囤,我們在開發(fā)時應用開發(fā)版本,遇到常見錯誤它會給出相應的警告辛萍。
當然悯姊,和Jquery一樣,Vue.js也可以使用CDN的形式引用在代碼當中贩毕。在bootcdn網站中直接復制代碼粘貼就可以了悯许,簡單方便。
2.vue環(huán)境搭建
我們在用 Vue.js 構建大型應用時推薦使用 NPM 安裝辉阶, NPM 能很好地和諸如 Webpack 或Browserify 模塊打包器配合使用先壕。 Vue.js 也提供配套工具來開發(fā)單文件組件瘩扼。
Vue.js的推薦開發(fā)環(huán)境為Nodejs。npm:為Nodejs下的包管理器启上。由于國內使用npm會很慢,這里推薦使用淘寶NPM鏡像(其網址為http://npm.taobao.org/)邢隧。我們使用webpack進行資源的合并和打包以及使用vue-cli進行用戶生成Vue工程模板。
那么冈在,我們著重的講解一下如何搭建一個合適的環(huán)境倒慧。
(1)如何安裝Nodejs
打開Nodejs的官網(https://nodejs.org/en/),我們可以在頁面最中間看到Download這個詞包券,選擇對應的版本下載即可纫谅,建議下載后一個版本。也可以選擇下面的Other Downloads下載其他版本和Mac的版本溅固。
image
下載完成后付秕,使用傻瓜式安裝即可。安裝完成后可以先進行下簡單的測試安裝是否成功了侍郭,后面還要進行環(huán)境配置询吴。在鍵盤按下【win+R】鍵,輸入cmd亮元,然后回車猛计,打開cmd窗口,輸入node
-v和npm
-v即可顯示當前安裝的版本號爆捞,即表示安裝成功奉瘤。新版的Node.js已自帶npm,npm的作用就是對Node.js依賴的包進行管理煮甥,也可以理解為用來安裝以及卸載Node.js需要裝的東西盗温。
image
(2)安裝cnpm
由于有些npm有些資源被屏蔽或者是國外資源的原因,經常會導致用npm安裝依賴包的時候失敗成肘,因此要么FQ要么就使用國內鏡像cnpm卖局。打開https://npm.taobao.org/,我們可以了解到這是一個完整npmjs.org鏡像双霍,可以用此代替官方版本(只讀)砚偶,同步頻率目前為 10分鐘 一次以保證盡量與官方服務同步。
同樣在命令行中輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org然后等待店煞。
image
安裝完成之后,我們輸入cnpm -v檢測风钻,當顯示下圖時為安裝成功顷蟀。
image
(3)安裝vue-cli
vue-cli是一種全局腳手架用于幫助搭建所需的模板框架,同理在cmd中輸入命令:npm install -g
vue-cli骡技。在這一段代碼中-g是為了全局使用的意思鸣个。與cnpm樣羞反,安裝完成后會顯示一長串的文件,輸入 vue
-v可以查看vue版本囤萤。此時昼窗,環(huán)境已經基本搭建成功。
√紊帷(4)測試澄惊,創(chuàng)建第一個Vue.js項目
在命令行中輸入:vue init webpack my-first-demo(項目文件夾名)。
image
此處以及以后的設置可以輸入富雅,也可以直接按回車和N掸驱。
image
這樣,第一個Vue.js項目就創(chuàng)建完成没佑。打開相應的存儲地址就會看到這個文件毕贼,我的放在可user/倫倫/的下面。
image
通過輸入cd? my-first-demo就可以進入目錄具體文件夾命令行中輸入:cnmp install或者npm
install安裝依賴包蛤奢。重新打開路徑下的文件夾鬼癣,我們可以看到文件夾中比之前的文件夾多了一個node_modules文件夾,到此腳手架安裝完成啤贩。
(5)在命令行中里輸入:npm run dev待秃。
此命令會用熱加載的方式運行我們的應用,熱加載可以讓我們在修改完代碼后不用手動刷新瀏覽器就能實時看到修改后的效果瓜晤。
這里簡單介紹下 npm run dev 命令锥余,其中的“run”對應的是package.json文件中,scripts字段中的dev痢掠,也就是
node
build/dev-server.js命令的一個快捷方式驱犹。項目運行成功后,瀏覽器會自動打開localhost:8080(如果瀏覽器沒有自動打開足画,可以手動輸入)雄驹。運行成功后,會看到如下所示的界面淹辞。此時医舆,任務完成。