2022-03-05vue如何新建一個項目(超詳細(xì)哦)

vue 創(chuàng)建項目(npm安裝→初始化項目)

cli2 和 >cli2腳手架創(chuàng)建

第一步npm安裝

首先:先從nodejs.org中下載nodejs

圖1

雙擊安裝,在安裝界面一直Next

圖2

圖3

圖4

直到Finish完成安裝够坐。

打開控制命令行程序(CMD),檢查是否正常

圖5

使用淘寶NPM?鏡像

大家都知道國內(nèi)直接使用npm 的官方鏡像是非常慢的,這里推薦使用淘寶 NPM 鏡像。

$? npm? install? -g? cnpm? --registry=https://registry.npm.taobao.org

這樣就可以使用cnpm 命令來安裝模塊了:

第二步項目初始化??

1.第一步:安裝vue-cli

cnpm install vue-cli -g? ? ? //全局安裝 vue-cli

圖6

查看vue-cli是否成功厚骗,不能檢查vue-cli,需要檢查vue

圖7

選定路徑示启,新建vue項目,這里我是在桌面上新建了sun文件夾领舰,cd目錄路徑

下面我一項目名為sell新建vue項目

cli2 創(chuàng)建項目

vue init webpack? ”項目名稱“

圖8

現(xiàn)在已經(jīng)創(chuàng)建好了夫嗓,那就讓項目先安裝下依賴再運行一下,會出現(xiàn)下面的頁面冲秽,操作指令是:

cnpm install

cnpm run dev

注意 這里要在sell下進(jìn)行安裝和運行哦!!!

圖9

啦啦啦? 安裝成功舍咖。

圖10

利用vue-cil初始化構(gòu)建vue項目,我們會獲得一個初始化的文件夾結(jié)構(gòu)锉桑,如下:

圖11

?> cli2 創(chuàng)建項目

vue create ?”項目名稱“

圖12

我這里選擇第一項 回車后直接初始化項目(圖13)排霉,也可以選擇最后一項 Manually select features? 自行選擇配置(圖14)

圖13

這里與cli2的運行方式不太一樣 由 npm run dev 變成npm run serve ,當(dāng)然這也可以設(shè)置,可以根據(jù)自己習(xí)慣配置民轴。

選擇Manually select features可自己選擇配置攻柠,看個人項目需求

空格鍵是選中與取消,A鍵是全選

圖14

TypeScript 支持使用 TypeScript 書寫源碼

Progressive Web App (PWA) Support PWA 支持后裸。

Router 支持 vue-router 瑰钮。

Vuex 支持 vuex 。

CSS Pre-processors 支持 CSS 預(yù)處理器微驶。

Linter / Formatter 支持代碼風(fēng)格檢查和格式化浪谴。

Unit Testing 支持單元測試。

E2E Testing 支持 E2E 測試。

裝好后苟耻,啟動

cd hello-world // 進(jìn)入到項目根目錄

npm run serve // 啟動項目

Vue CLI >= 3 和舊版使用了相同的?vue?命令篇恒,所以 Vue CLI 2 (vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的?vue init?功能梁呈,你可以全局安裝一個橋接工具:

下面開始進(jìn)入你的vue之旅吧;槎取!

https://cn.vuejs.org/? ? ? ? ? ? ? ? ? ? //官網(wǎng)才是開始的必經(jīng)之路官卡。蝗茁。。寻咒。

此文轉(zhuǎn)自程序員是粉色的

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末哮翘,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子毛秘,更是在濱河造成了極大的恐慌饭寺,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,383評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件叫挟,死亡現(xiàn)場離奇詭異艰匙,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)抹恳,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評論 3 385
  • 文/潘曉璐 我一進(jìn)店門员凝,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人奋献,你說我怎么就攤上這事健霹。” “怎么了瓶蚂?”我有些...
    開封第一講書人閱讀 157,852評論 0 348
  • 文/不壞的土叔 我叫張陵糖埋,是天一觀的道長。 經(jīng)常有香客問我窃这,道長瞳别,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,621評論 1 284
  • 正文 為了忘掉前任杭攻,我火速辦了婚禮洒试,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘朴上。我一直安慰自己垒棋,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,741評論 6 386
  • 文/花漫 我一把揭開白布痪宰。 她就那樣靜靜地躺著叼架,像睡著了一般畔裕。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上乖订,一...
    開封第一講書人閱讀 49,929評論 1 290
  • 那天扮饶,我揣著相機(jī)與錄音,去河邊找鬼乍构。 笑死甜无,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的哥遮。 我是一名探鬼主播岂丘,決...
    沈念sama閱讀 39,076評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼眠饮!你這毒婦竟也來了奥帘?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,803評論 0 268
  • 序言:老撾萬榮一對情侶失蹤仪召,失蹤者是張志新(化名)和其女友劉穎寨蹋,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體扔茅,經(jīng)...
    沈念sama閱讀 44,265評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡已旧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,582評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了召娜。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片运褪。...
    茶點故事閱讀 38,716評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖萤晴,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情胁后,我是刑警寧澤店读,帶...
    沈念sama閱讀 34,395評論 4 333
  • 正文 年R本政府宣布,位于F島的核電站攀芯,受9級特大地震影響屯断,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜侣诺,卻給世界環(huán)境...
    茶點故事閱讀 40,039評論 3 316
  • 文/蒙蒙 一殖演、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧年鸳,春花似錦趴久、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽灭忠。三九已至,卻和暖如春座硕,著一層夾襖步出監(jiān)牢的瞬間弛作,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評論 1 266
  • 我被黑心中介騙來泰國打工华匾, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留映琳,地道東北人。 一個月前我還...
    沈念sama閱讀 46,488評論 2 361
  • 正文 我出身青樓蜘拉,卻偏偏與公主長得像萨西,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子诸尽,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,612評論 2 350

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