vue-cli初步

vue.js有著名的全家桶系列,包含了vue-router矛渴,vuex椎扬, vue-resource,再加上構(gòu)建工具vue-cli具温,就是一個完整的vue項目的核心構(gòu)成蚕涤。
vue-cli這個構(gòu)建工具大大降低了webpack的使用難度,支持熱更新铣猩,有webpack-dev-server的支持揖铜,相當(dāng)于啟動了一個請求服務(wù)器,給你搭建了一個測試環(huán)境达皿,只關(guān)注開發(fā)就OK天吓。

1.安裝node.js

下載安裝node.js,一路默認(rèn)安裝即可峦椰,安裝完畢龄寞,啟動命令行,輸入命令node -v汤功,可以看到node.js的版本號

image

2.安裝vue-cli

  • 使用npm(需要安裝node環(huán)境)全局安裝webpack物邑,啟動命令行,輸入如下命令:
npm install -g webpack

耐心等待安裝完成之后輸入 webpack -v,可以看到如圖所示

image
  • 從webpack 4.X開始色解,需要全局安裝webpack-cli
npm install webpack webpack-cli -g

image
  • 全局安裝vue-cli茂嗓,在cmd中輸入命令
npm install --global vue-cli

耐心等待安裝完成之后輸入 vue -V(注意這里是大寫的“V”),如下圖科阎,如果出現(xiàn)相應(yīng)的版本號在抛,則說明安裝成功。

image

打開C:\Users\Andminster\AppData\Roaming\npm目錄下可以看到

image

打開node_modules也可以看到:

image

4.用vue-cli來構(gòu)建項目

首先在D盤新建一個VueStudy作為項目存放地萧恕,然后使用命令行cd進(jìn)入到項目目錄,輸入

vue init webpack demo

需要選擇一些選項肠阱,會跳出幾個選項讓你回答:

  • Project name (demo): -----項目名稱票唆,直接回車,按照括號中默認(rèn)名字(注意這里的名字不能有大寫字母)

  • Project description (A Vue.js project): ----項目描述屹徘,也可直接點擊回車走趋,使用默認(rèn)名字

  • Author (): ----作者,輸入你的大名
    接下來會讓用戶選擇:

  • Runtime + Compiler: recommended for most users 運(yùn)行加編譯噪伊,既然已經(jīng)說了推薦簿煌,就選它了
    Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅運(yùn)行時,已經(jīng)有推薦了就選擇第一個了

  • Install vue-router? (Y/n) 是否安裝vue-router鉴吹,這是官方的路由姨伟,大多數(shù)情況下都使用。

  • Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼豆励,ESLint是個代碼風(fēng)格管理工具夺荒,是用來統(tǒng)一代碼風(fēng)格的。
    接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預(yù)設(shè)良蒸,編寫vue項目時的代碼風(fēng)格

  • Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試

  • Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試

    image

配置完成后技扼,進(jìn)入demo項目目錄,安裝依賴

npm install

完成后嫩痰,查看項目路徑下各個目錄含義

image

啟動項目

npm run dev

如果瀏覽器打開之后剿吻,沒有加載出頁面,有可能是本地的 8080 端口被占用串纺,需要修改一下配置文件 config里的index.js

image

運(yùn)行成功(服務(wù)啟動成功后瀏覽器會默認(rèn)打開一個“歡迎頁面”)

image

備注:
npm淘寶鏡像安裝命令
npm install -g cnpm --registry=https://registry.npm.taobao.org

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末丽旅,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子造垛,更是在濱河造成了極大的恐慌魔招,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件五辽,死亡現(xiàn)場離奇詭異办斑,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進(jìn)店門乡翅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來鳞疲,“玉大人,你說我怎么就攤上這事蠕蚜∩星ⅲ” “怎么了?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵靶累,是天一觀的道長腺毫。 經(jīng)常有香客問我,道長挣柬,這世上最難降的妖魔是什么潮酒? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮邪蛔,結(jié)果婚禮上急黎,老公的妹妹穿的比我還像新娘。我一直安慰自己侧到,他們只是感情好勃教,可當(dāng)我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著匠抗,像睡著了一般故源。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上戈咳,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天心软,我揣著相機(jī)與錄音,去河邊找鬼著蛙。 笑死删铃,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的踏堡。 我是一名探鬼主播猎唁,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼顷蟆!你這毒婦竟也來了诫隅?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤帐偎,失蹤者是張志新(化名)和其女友劉穎逐纬,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體削樊,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡豁生,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年兔毒,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片甸箱。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡育叁,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出芍殖,到底是詐尸還是另有隱情豪嗽,我是刑警寧澤,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布豌骏,位于F島的核電站龟梦,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏窃躲。R本人自食惡果不足惜变秦,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望框舔。 院中可真熱鬧,春花似錦赎婚、人聲如沸刘绣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽纬凤。三九已至,卻和暖如春撩嚼,著一層夾襖步出監(jiān)牢的瞬間停士,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工完丽, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留恋技,地道東北人。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓逻族,卻偏偏與公主長得像蜻底,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子聘鳞,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內(nèi)容

  • vue.js有著名的全家桶系列薄辅,包含了vue-router,vuex抠璃, vue-resource站楚,再加上構(gòu)建工具v...
    陶然然_niit閱讀 1,384評論 0 8
  • 1.安裝node.js 下載安裝node.js,一路默認(rèn)安裝即可搏嗡,安裝完畢窿春,啟動命令行,輸入命令node -v,可...
    王杰磊閱讀 270評論 0 0
  • 1.安裝node.js 下載安裝node.js谁尸,一路默認(rèn)安裝即可舅踪,安裝完畢,啟動命令行良蛮,輸入命令node -v抽碌,可...
    蜜思1013閱讀 176評論 0 0
  • 1.下載安裝node.js 一路默認(rèn)安裝货徙,啟動命令行,輸入命令node -v皮胡,可以看到node.js的版本號 2....
    Rebirth_914閱讀 711評論 0 5
  • Android studio 安裝 flutter 和Dart 插件時痴颊, 最好是到插件官網(wǎng)下載對應(yīng)的插件版本。An...
    Stay_Li閱讀 7,835評論 4 1