vue.js 安裝與配置

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(如果瀏覽器沒有自動打開足画,可以手動輸入)雄驹。運行成功后,會看到如下所示的界面淹辞。此時医舆,任務完成。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末象缀,一起剝皮案震驚了整個濱河市蔬将,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌央星,老刑警劉巖霞怀,帶你破解...
    沈念sama閱讀 222,000評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異莉给,居然都是意外死亡毙石,警方通過查閱死者的電腦和手機廉沮,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,745評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來徐矩,“玉大人滞时,你說我怎么就攤上這事÷说疲” “怎么了坪稽?”我有些...
    開封第一講書人閱讀 168,561評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長力喷。 經常有香客問我刽漂,道長,這世上最難降的妖魔是什么弟孟? 我笑而不...
    開封第一講書人閱讀 59,782評論 1 298
  • 正文 為了忘掉前任贝咙,我火速辦了婚禮,結果婚禮上拂募,老公的妹妹穿的比我還像新娘庭猩。我一直安慰自己,他們只是感情好陈症,可當我...
    茶點故事閱讀 68,798評論 6 397
  • 文/花漫 我一把揭開白布蔼水。 她就那樣靜靜地躺著,像睡著了一般录肯。 火紅的嫁衣襯著肌膚如雪趴腋。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,394評論 1 310
  • 那天论咏,我揣著相機與錄音优炬,去河邊找鬼。 笑死厅贪,一個胖子當著我的面吹牛蠢护,可吹牛的內容都是我干的。 我是一名探鬼主播养涮,決...
    沈念sama閱讀 40,952評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼葵硕,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了贯吓?” 一聲冷哼從身側響起懈凹,我...
    開封第一講書人閱讀 39,852評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎悄谐,沒想到半個月后介评,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 46,409評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡尊沸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,483評論 3 341
  • 正文 我和宋清朗相戀三年威沫,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片洼专。...
    茶點故事閱讀 40,615評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡棒掠,死狀恐怖,靈堂內的尸體忽然破棺而出屁商,到底是詐尸還是另有隱情烟很,我是刑警寧澤,帶...
    沈念sama閱讀 36,303評論 5 350
  • 正文 年R本政府宣布蜡镶,位于F島的核電站雾袱,受9級特大地震影響,放射性物質發(fā)生泄漏官还。R本人自食惡果不足惜芹橡,卻給世界環(huán)境...
    茶點故事閱讀 41,979評論 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望望伦。 院中可真熱鬧林说,春花似錦、人聲如沸屯伞。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,470評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽劣摇。三九已至珠移,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間末融,已是汗流浹背钧惧。 一陣腳步聲響...
    開封第一講書人閱讀 33,571評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留滑潘,地道東北人垢乙。 一個月前我還...
    沈念sama閱讀 49,041評論 3 377
  • 正文 我出身青樓,卻偏偏與公主長得像语卤,于是被迫代替她去往敵國和親追逮。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,630評論 2 359

推薦閱讀更多精彩內容