vue-cli 構(gòu)建vue項(xiàng)目 28

vue-cli 是一個(gè)官方發(fā)布 vue.js項(xiàng)目腳手架梯投,使用 vue-cli 可以快速創(chuàng)建 vue 項(xiàng)目

自動(dòng)化構(gòu)建工具 ?

一疲恢、 安裝Node.js

首先需要安裝node環(huán)境

只是這樣安裝的 node 是固定版本的职辅,如果需要多版本的 node,可以使用 nvm 安裝

安裝完成后,可以命令行工具中輸入node -v和npm -v,如果能顯示出版本號(hào)蒲祈,就說(shuō)明安裝成功。

二萝嘁、安裝 vue-cli

安裝好了 node梆掸,我們可以直接全局安裝 vue-cli:

npm install -g vue-cli

但是這種安裝方式比較慢,推薦使用國(guó)內(nèi)鏡像來(lái)安裝牙言,所以我們先設(shè)置 cnpm:

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

如果安裝失敗酸钦,可以使用npm cache clean清理緩存,然后再重新安裝咱枉。后面的安裝過(guò)程中卑硫,如有安裝失敗的情況,也需要先清理緩存

同樣可以使用cnpm -v查看是否安裝成功

然后使用 cnpm 安裝 vue-cli 和 webpack

cnpm install -g vue-cli

最新的 vue 項(xiàng)目模板中蚕断,都帶有 webpack 插件欢伏,所以這里可以不安裝 webpack

安裝完成后,可以使用vue -V(注意 V 大寫(xiě))查看是否安裝成功亿乳。

如果提示“無(wú)法識(shí)別 'vue' ” 颜懊,有可能是 npm 版本過(guò)低,可以使用 npm install -g npm 來(lái)更新版本

三、生成項(xiàng)目

首先需要在命令行中進(jìn)入到項(xiàng)目目錄河爹,然后輸入:

vue init webpack Vue-Project

其中 webpack 是模板名稱(chēng),可以到 vue.js 的 GitHub 上查看更多的模板https://github.com/vuejs-templates

Vue-Project 是自定義的項(xiàng)目名稱(chēng)桐款,命令執(zhí)行之后咸这,會(huì)在當(dāng)前目錄生成一個(gè)以該名稱(chēng)命名的項(xiàng)目文件夾

配置完成后,可以看到目錄下多出了一個(gè)項(xiàng)目文件夾魔眨,里面就是 vue-cli 創(chuàng)建的一個(gè)基于 webpack 的 vue.js 項(xiàng)目

然后進(jìn)入項(xiàng)目目錄(cd Vue-Project)媳维,使用 cnpm 安裝依賴(lài)

cnpm install

然后啟動(dòng)項(xiàng)目

npm run dev

如果瀏覽器打開(kāi)之后,沒(méi)有加載出頁(yè)面遏暴,有可能是本地的 8080 端口被占用侄刽,需要修改一下配置文件config>index.js

建議將端口號(hào)改為不常用的端口。另外我還將 build 的路徑前綴修改為 ' ./ '(原本為 ' / ')朋凉,是因?yàn)榇虬笾莸ぃ獠恳?js 和 css 文件時(shí),如果路徑以 ' / ' 開(kāi)頭杂彭,在本地是無(wú)法找到對(duì)應(yīng)文件的(服務(wù)器上沒(méi)問(wèn)題)墓毒。所以如果需要在本地打開(kāi)打包后的文件,就得修改文件路徑亲怠。

四所计、打包上線(xiàn)

自己的項(xiàng)目文件都需要放到 src 文件夾下

項(xiàng)目開(kāi)發(fā)完成之后,可以輸入 npm run build 來(lái)進(jìn)行打包工作

npm run build

打包完成后团秽,會(huì)生成 dist 文件夾主胧,如果已經(jīng)修改了文件路徑,可以直接打開(kāi)本地文件查看

項(xiàng)目上線(xiàn)時(shí)习勤,只需要將 dist 文件夾放到服務(wù)器就行了踪栋。


世界不曾虧待每一個(gè)努力的人。起跑的優(yōu)劣早已變得無(wú)關(guān)緊要姻报,重點(diǎn)在于你是否是那位終身都在努力奔跑的人己英,你是否已經(jīng)意識(shí)到并認(rèn)同越努力越幸運(yùn)這句真理。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末吴旋,一起剝皮案震驚了整個(gè)濱河市损肛,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌荣瑟,老刑警劉巖治拿,帶你破解...
    沈念sama閱讀 216,544評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異笆焰,居然都是意外死亡劫谅,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)捏检,“玉大人荞驴,你說(shuō)我怎么就攤上這事」岢牵” “怎么了熊楼?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,764評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀(guān)的道長(zhǎng)能犯。 經(jīng)常有香客問(wèn)我鲫骗,道長(zhǎng),這世上最難降的妖魔是什么踩晶? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,193評(píng)論 1 292
  • 正文 為了忘掉前任执泰,我火速辦了婚禮,結(jié)果婚禮上渡蜻,老公的妹妹穿的比我還像新娘术吝。我一直安慰自己,他們只是感情好晴楔,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,216評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布顿苇。 她就那樣靜靜地躺著,像睡著了一般税弃。 火紅的嫁衣襯著肌膚如雪纪岁。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,182評(píng)論 1 299
  • 那天则果,我揣著相機(jī)與錄音幔翰,去河邊找鬼。 笑死西壮,一個(gè)胖子當(dāng)著我的面吹牛遗增,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播款青,決...
    沈念sama閱讀 40,063評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼做修,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了抡草?” 一聲冷哼從身側(cè)響起饰及,我...
    開(kāi)封第一講書(shū)人閱讀 38,917評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎康震,沒(méi)想到半個(gè)月后燎含,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,329評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡腿短,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,543評(píng)論 2 332
  • 正文 我和宋清朗相戀三年屏箍,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了绘梦。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,722評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡赴魁,死狀恐怖卸奉,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情尚粘,我是刑警寧澤择卦,帶...
    沈念sama閱讀 35,425評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站郎嫁,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏祈噪。R本人自食惡果不足惜泽铛,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,019評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望辑鲤。 院中可真熱鬧盔腔,春花似錦、人聲如沸月褥。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,671評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)宁赤。三九已至舀透,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間决左,已是汗流浹背愕够。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,825評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留佛猛,地道東北人惑芭。 一個(gè)月前我還...
    沈念sama閱讀 47,729評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像继找,于是被迫代替她去往敵國(guó)和親遂跟。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,614評(píng)論 2 353

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