vue-cli初步

1.安裝node.js

下載安裝node.js烘苹,一路默認安裝即可躲株,安裝完畢,啟動命令行镣衡,輸入命令node -v霜定,可以看到node.js的版本號

image.png

2.安裝vue-cli

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

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


image.png
  • 從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)相應的版本號吆视,則說明安裝成功典挑。


image.png

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

image.png

npm目錄.jpg
打開node_modules也可以看到:


image.png

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

首先在D盤新建一個VueStudy作為項目存放地,然后使用命令行cd進入到項目目錄啦吧,輸入

                    vue init webpack demo

需要選擇一些選項您觉,會跳出幾個選項讓你回答:
Project name (demo): -----項目名稱,直接回車授滓,按照括號中默認名字(注意這里的名字不能有大寫字母)
Project description (A Vue.js project): ----項目描述琳水,也可直接點擊回車,使用默認名字
Author ():默認
接下來會讓用戶選擇:
Runtime + Compiler: recommended for most users 運行加編譯般堆,既然已經(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 僅運行時,已經(jīng)有推薦了就選擇第一個了
Install vue-router? (Y/n) 是否安裝vue-router淮摔,這是官方的路由浑玛,大多數(shù)情況下都使用。yes
Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼噩咪,ESLint是個代碼風格管理工具顾彰,是用來統(tǒng)一代碼風格的极阅。no
接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設(shè),編寫vue項目時的代碼風格
Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試no

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

配置完成后涨享,進入demo項目目錄筋搏,安裝依賴

npm install

啟動項目

npm run dev

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


image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市厕隧,隨后出現(xiàn)的幾起案子奔脐,更是在濱河造成了極大的恐慌,老刑警劉巖吁讨,帶你破解...
    沈念sama閱讀 219,366評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件髓迎,死亡現(xiàn)場離奇詭異,居然都是意外死亡建丧,警方通過查閱死者的電腦和手機排龄,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,521評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來翎朱,“玉大人橄维,你說我怎么就攤上這事∷┣” “怎么了争舞?”我有些...
    開封第一講書人閱讀 165,689評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長澈灼。 經(jīng)常有香客問我竞川,道長,這世上最難降的妖魔是什么叁熔? 我笑而不...
    開封第一講書人閱讀 58,925評論 1 295
  • 正文 為了忘掉前任委乌,我火速辦了婚禮,結(jié)果婚禮上者疤,老公的妹妹穿的比我還像新娘福澡。我一直安慰自己叠赦,他們只是感情好驹马,可當我...
    茶點故事閱讀 67,942評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著除秀,像睡著了一般糯累。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上册踩,一...
    開封第一講書人閱讀 51,727評論 1 305
  • 那天泳姐,我揣著相機與錄音,去河邊找鬼暂吉。 笑死胖秒,一個胖子當著我的面吹牛缎患,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播阎肝,決...
    沈念sama閱讀 40,447評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼挤渔,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了风题?” 一聲冷哼從身側(cè)響起判导,我...
    開封第一講書人閱讀 39,349評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎沛硅,沒想到半個月后眼刃,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,820評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡摇肌,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,990評論 3 337
  • 正文 我和宋清朗相戀三年擂红,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片朦蕴。...
    茶點故事閱讀 40,127評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡篮条,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出吩抓,到底是詐尸還是另有隱情涉茧,我是刑警寧澤,帶...
    沈念sama閱讀 35,812評論 5 346
  • 正文 年R本政府宣布疹娶,位于F島的核電站伴栓,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏雨饺。R本人自食惡果不足惜钳垮,卻給世界環(huán)境...
    茶點故事閱讀 41,471評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望额港。 院中可真熱鬧饺窿,春花似錦、人聲如沸移斩。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,017評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽向瓷。三九已至肠套,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間猖任,已是汗流浹背你稚。 一陣腳步聲響...
    開封第一講書人閱讀 33,142評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人刁赖。 一個月前我還...
    沈念sama閱讀 48,388評論 3 373
  • 正文 我出身青樓搁痛,卻偏偏與公主長得像,于是被迫代替她去往敵國和親宇弛。 傳聞我的和親對象是個殘疾皇子落追,可洞房花燭夜當晚...
    茶點故事閱讀 45,066評論 2 355

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

  • vue.js有著名的全家桶系列,包含了vue-router涯肩,vuex轿钠, vue-resource,再加上構(gòu)建工具v...
    陶然然_niit閱讀 1,382評論 0 8
  • vue-cli 是一個官方發(fā)布 vue.js 項目腳手架病苗,使用 vue-cli 可以快速創(chuàng)建 vue 項目疗垛,Git...
    阿爾法乀閱讀 9,551評論 0 4
  • Vue是近兩年來比較火的一個前端框架(漸進式框架吧),與reactjs和angularjs三國鼎立硫朦,我不是職業(yè)前端...
    玄木閱讀 272,777評論 70 259
  • 今天預約了一家業(yè)主維修咬展,她讓我早點去泽裳,說待會要出去一趟。早點去破婆,不會耽擱你們睡覺嗎涮总? 很多年輕的業(yè)主每次電話,總是...
    別山舉水閱讀 4,422評論 58 55
  • 名畫《星空》是梵高瘋狂而天才的想象祷舀,繪本《星空》則是幾米孤獨而美好的期望瀑梗。對于由連環(huán)畫陪伴長大的一代人來說,幾米的...
    亞理思多得閱讀 557評論 0 0