VUE學(xué)習(xí)01:使用vue-cli搭建項目

vue-cli 是一個官方發(fā)布 vue.js 項目腳手架蕉世,使用 vue-cli 可以快速創(chuàng)建 vue 項目茴厉,GitHub地址是:https://github.com/vuejs/vue-cli?

一藕咏、 安裝 node.js

首先需要安裝node環(huán)境竖配,可以直接到中文官網(wǎng)http://nodejs.cn/下載安裝包谅摄。

只是這樣安裝的 node 是固定版本的吨灭,如果需要多版本的 node,可以使用 nvm 安裝http://blog.csdn.net/s8460049/article/details/52396399

安裝完成后宙地,可以命令行工具中輸入 node -v 和 npm -v摔认,如果能顯示出版本號,就說明安裝成功宅粥。

二参袱、安裝 vue-cli

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

npm install -g vue-cli

但是這種安裝方式比較慢粹胯,推薦使用國內(nèi)鏡像來安裝蓖柔,所以我們先設(shè)置 cnpm:

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

如果安裝失敗,可以使用 npm cache clean 清理緩存风纠,然后再重新安裝况鸣。后面的安裝過程中,如有安裝失敗的情況竹观,也需要先清理緩存

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

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

vue init webpack projectName

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

projectName 是自定義的項目名稱,命令執(zhí)行之后臭增,會在當(dāng)前目錄生成一個以該名稱命名的項目文件夾

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

然后進入項目目錄(cd projectName)誊抛,使用 cnpm 安裝依賴

cnpm install

npm run dev

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

建議將端口號改為不常用的端口瞎领。另外我還將 build 的路徑前綴修改為 ' ./ '(原本為 ' / '),是因為打包之后随夸,外部引入 js 和 css 文件時九默,如果路徑以 ' / ' 開頭,在本地是無法找到對應(yīng)文件的(服務(wù)器上沒問題)宾毒。所以如果需要在本地打開打包后的文件驼修,就得修改文件路徑。

四诈铛、打包上線

自己的項目文件都需要放到 src 文件夾下

項目開發(fā)完成之后乙各,可以輸入 npm run build 來進行打包工作

npm run build

打包完成后,會生成 dist 文件夾幢竹,如果已經(jīng)修改了文件路徑耳峦,可以直接打開本地文件查看

項目上線時,只需要將 dist 文件夾放到服務(wù)器就行了妨退。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末妇萄,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子咬荷,更是在濱河造成了極大的恐慌冠句,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件幸乒,死亡現(xiàn)場離奇詭異懦底,居然都是意外死亡,警方通過查閱死者的電腦和手機罕扎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進店門聚唐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人腔召,你說我怎么就攤上這事杆查。” “怎么了臀蛛?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵亲桦,是天一觀的道長。 經(jīng)常有香客問我浊仆,道長客峭,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任抡柿,我火速辦了婚禮舔琅,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘洲劣。我一直安慰自己备蚓,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布闪檬。 她就那樣靜靜地躺著星著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪粗悯。 梳的紋絲不亂的頭發(fā)上虚循,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天,我揣著相機與錄音样傍,去河邊找鬼横缔。 笑死,一個胖子當(dāng)著我的面吹牛衫哥,可吹牛的內(nèi)容都是我干的茎刚。 我是一名探鬼主播,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼撤逢,長吁一口氣:“原來是場噩夢啊……” “哼膛锭!你這毒婦竟也來了粮坞?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤初狰,失蹤者是張志新(化名)和其女友劉穎莫杈,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體奢入,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡筝闹,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了腥光。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片关顷。...
    茶點故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖武福,靈堂內(nèi)的尸體忽然破棺而出议双,到底是詐尸還是另有隱情,我是刑警寧澤捉片,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布聋伦,位于F島的核電站,受9級特大地震影響界睁,放射性物質(zhì)發(fā)生泄漏觉增。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一翻斟、第九天 我趴在偏房一處隱蔽的房頂上張望逾礁。 院中可真熱鬧,春花似錦访惜、人聲如沸嘹履。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽砾嫉。三九已至,卻和暖如春窒篱,著一層夾襖步出監(jiān)牢的瞬間焕刮,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工墙杯, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留配并,地道東北人。 一個月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓高镐,卻偏偏與公主長得像溉旋,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子嫉髓,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,472評論 2 348

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