vue開始一個項目

參考博客:https://www.runoob.com/w3cnote/vue2-start-coding.html

我是mac電腦

先確保電腦中已經(jīng)安裝了npm 并且使用npm安裝過了node两入。 如果沒有便瑟,可以參考另一篇文章: http://www.reibang.com/p/2352a2b4cb14

安裝webpacket

執(zhí)行命令 npm install webpack -g

安裝腳手架 vue-cli

執(zhí)行命令npm install @vue/cli -g

創(chuàng)建項目

在硬盤上找一個文件夾放工程用的,在終端中進入該目錄
cd 目錄路徑

vue create <project-name>
根據(jù)提示完成創(chuàng)建

image.png

現(xiàn)在比較流行這樣的創(chuàng)建方式,再自己配置一個vue.config.js文件已添。vue.config.js文件配置可以參考文章:http://www.reibang.com/p/b358a91bdf2d

創(chuàng)建完成后如下圖所示結(jié)構(gòu):

image.png

啟動項目

終端來到此項目文件夾,使用命令npm run serve啟動服務(wù)器

image.png

啟動后復(fù)制鏈接 http://localhost:8080/ 或者http://10.10.30.88:8080/ 到瀏覽器打開芭挽。 也可以在同一個局域網(wǎng)內(nèi)的其他設(shè)備上用瀏覽器打開鏈接http://10.10.30.88:8080/


下面的使用模板創(chuàng)建可以選擇不看0堤簟!R渭懂算!

根據(jù)模板創(chuàng)建項目(需要vue-cli 3.0以下版本 或者安裝vue-cli-init)

vue init <template-name> <project-name不能用中文>

從而自動生成的項目模板,比較常用的模板有webpack庇麦、webpack-simple计技、browserify等模板。

下面使用 vue init webpack test 命令來創(chuàng)建一個基于 webpack 模板的新項目

會有一些初始化的設(shè)置山橄,如下輸入:
Target directory exists. Continue? (Y/n)直接回車默認(然后會下載 vue2.0模板垮媒,這里可能需要連代理)
Project name (vue-test)直接回車默認
Project description (A Vue.js project) 直接回車默認
Author 寫你自己的名字

命令行實例:

image.png

Project name ==> 工程名 回車即可
Project description ==> 工程描述 回車即可
Author ==> 作者 隨便填一下
Vue build ==> 打包方式,回車即可航棱;
Install vue-router ==> 是否要安裝 vue-router睡雇,項目中肯定要使用到 所以Y 回車;
Use ESLint to lint your code ==> 是否需要 js 語法檢測 目前我們不需要 所以 n 回車饮醇;
Set up unit tests ==> 是否安裝 單元測試工具 目前我們不需要 所以 n 回車它抱;
Setup e2e tests with Nightwatch ==> 是否需要 端到端測試工具 目前我們不需要 所以 n 回車;
Should we run npm install for you after the project has been created? ==> 是否使用npm安裝依賴 回車即可

cd 命令進入創(chuàng)建的工程目錄
安裝 vue 路由模塊vue-router和網(wǎng)絡(luò)請求模塊vue-resource
npm install vue-router vue-resource --save

啟動項目

npm run dev

運行成功會看到這個頁面

image.png

最后就是在編譯器中編寫項目咯~~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末朴艰,一起剝皮案震驚了整個濱河市观蓄,隨后出現(xiàn)的幾起案子混移,更是在濱河造成了極大的恐慌,老刑警劉巖侮穿,帶你破解...
    沈念sama閱讀 217,826評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件歌径,死亡現(xiàn)場離奇詭異,居然都是意外死亡亲茅,警方通過查閱死者的電腦和手機回铛,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來克锣,“玉大人茵肃,你說我怎么就攤上這事∪⑺#” “怎么了免姿?”我有些...
    開封第一講書人閱讀 164,234評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長榕酒。 經(jīng)常有香客問我胚膊,道長,這世上最難降的妖魔是什么想鹰? 我笑而不...
    開封第一講書人閱讀 58,562評論 1 293
  • 正文 為了忘掉前任紊婉,我火速辦了婚禮,結(jié)果婚禮上辑舷,老公的妹妹穿的比我還像新娘喻犁。我一直安慰自己,他們只是感情好何缓,可當我...
    茶點故事閱讀 67,611評論 6 392
  • 文/花漫 我一把揭開白布肢础。 她就那樣靜靜地躺著,像睡著了一般碌廓。 火紅的嫁衣襯著肌膚如雪传轰。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,482評論 1 302
  • 那天谷婆,我揣著相機與錄音慨蛙,去河邊找鬼。 笑死纪挎,一個胖子當著我的面吹牛期贫,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播异袄,決...
    沈念sama閱讀 40,271評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼通砍,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了烤蜕?” 一聲冷哼從身側(cè)響起封孙,我...
    開封第一講書人閱讀 39,166評論 0 276
  • 序言:老撾萬榮一對情侶失蹤垢揩,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后敛瓷,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,608評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡斑匪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,814評論 3 336
  • 正文 我和宋清朗相戀三年呐籽,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蚀瘸。...
    茶點故事閱讀 39,926評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡狡蝶,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出贮勃,到底是詐尸還是另有隱情贪惹,我是刑警寧澤,帶...
    沈念sama閱讀 35,644評論 5 346
  • 正文 年R本政府宣布寂嘉,位于F島的核電站奏瞬,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏泉孩。R本人自食惡果不足惜硼端,卻給世界環(huán)境...
    茶點故事閱讀 41,249評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望寓搬。 院中可真熱鬧珍昨,春花似錦、人聲如沸句喷。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,866評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽唾琼。三九已至兄春,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間父叙,已是汗流浹背神郊。 一陣腳步聲響...
    開封第一講書人閱讀 32,991評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留趾唱,地道東北人涌乳。 一個月前我還...
    沈念sama閱讀 48,063評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像甜癞,于是被迫代替她去往敵國和親夕晓。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,871評論 2 354

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