Day3.關(guān)于vue.cli的搭建

1.首先全局安裝
npm install -g @vue/cli-service-global
2.創(chuàng)建項(xiàng)目
vue create 跟文件名

image.png

第一個(gè)為默認(rèn)配置族淮,第二個(gè)是自定義配置
在自定義配置中如果要選擇的話,按空格
babel:es6轉(zhuǎn)es5的工具
css pre-processors:預(yù)編譯
linter/format:代碼規(guī)范的檢查工具凭涂,不規(guī)范就會(huì)報(bào)錯(cuò)
unit tesing,esetesting:測(cè)試的工具
項(xiàng)目里面 需要什么就配置什么
4.按回車后


image.png

選擇node-sass
5.再次回車后


image.png

eslint的配置:選擇standard(標(biāo)準(zhǔn)的)
6.再次回車后


image.png

是save時(shí)候檢查還是提交時(shí)候檢查(eslint)
選擇save的時(shí)候檢查
7.再次回車后
image.png

bebel贴妻,postCss,ES等這些配置放在哪里切油?
是單獨(dú)的config里面呢還是packge.json里
8.選擇單獨(dú)放回車后


image.png

(你將來(lái)的項(xiàng)目都用這些配置嗎?)選擇NO
9.再次回車后
image.png

這時(shí)候已經(jīng)在配置項(xiàng)目了(也可以用vue ui來(lái)配置(圖形化))

回退版本(2.x的版本)的話就用npm install -g @vue/cli-init這個(gè)命令

10名惩。完成生成后的目錄(都是配置文件)


image.png

yarn.lock是依賴包版本的東西
postcss.config里面是自動(dòng)加前綴的澎胡,babel里面也是配置的代碼,這些都屬于配置項(xiàng)
editorconfig是自己編輯器的配置
browserslistrc瀏覽器的列表(瀏覽器的兼容版本)
NODEmodule(我們項(xiàng)目所依賴的包)
pubilc(公共的靜態(tài)文件)

src(主要代碼寫在這里面)

image.png

assets里面圖片文件

components里面組件娩鹉,以vue結(jié)尾的攻谁,也叫作單文件組件

image.png

一個(gè)單文件里面包含了html,JavaScript弯予,css

main.js里面
image.png

render這個(gè)方法渲染的就是App這個(gè)組件戚宦,渲染給誰(shuí)?通過(guò)¥mount渲染給#app锈嫩,#app在public的index.html里面
div里面真正顯示的是app.vue里面的這個(gè)組件受楼,這就是腳手架幫我們做的事情


image.png

server就是運(yùn)行垦搬,build的作用是打包,(html艳汽,css猴贰,js)交給瀏覽器去運(yùn)行
運(yùn)行的命令(npm run server)

運(yùn)行之后里面的東西怎么渲染出來(lái)的呢?

看app.vue里面


image.png

關(guān)于組件的引入

是ES6里面的寫法河狐,引入一個(gè)模塊的話用import這種方式米绕,相當(dāng)于gulp里面的require
通過(guò)export default暴露出去,定義一個(gè)組件其實(shí)就是對(duì)象馋艺,別的地方需要的話通過(guò)import去引入栅干,
注意:組件的命名通過(guò)大駝峰的方式命名,在項(xiàng)目當(dāng)中我們的配置一幫都裝在packge丈钙。json里面
真正項(xiàng)目的入口是main非驮。js,渲染到默認(rèn)的APP這個(gè)組件里面雏赦,掛載到了#APP

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末劫笙,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子星岗,更是在濱河造成了極大的恐慌填大,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,113評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件俏橘,死亡現(xiàn)場(chǎng)離奇詭異允华,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)寥掐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評(píng)論 2 381
  • 文/潘曉璐 我一進(jìn)店門靴寂,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人召耘,你說(shuō)我怎么就攤上這事百炬。” “怎么了污它?”我有些...
    開(kāi)封第一講書人閱讀 153,340評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵剖踊,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我衫贬,道長(zhǎng)德澈,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書人閱讀 55,449評(píng)論 1 279
  • 正文 為了忘掉前任固惯,我火速辦了婚禮梆造,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘缝呕。我一直安慰自己澳窑,他們只是感情好斧散,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,445評(píng)論 5 374
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著摊聋,像睡著了一般鸡捐。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上麻裁,一...
    開(kāi)封第一講書人閱讀 49,166評(píng)論 1 284
  • 那天箍镜,我揣著相機(jī)與錄音,去河邊找鬼煎源。 笑死色迂,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的手销。 我是一名探鬼主播歇僧,決...
    沈念sama閱讀 38,442評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼锋拖!你這毒婦竟也來(lái)了诈悍?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 37,105評(píng)論 0 261
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤兽埃,失蹤者是張志新(化名)和其女友劉穎侥钳,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體柄错,經(jīng)...
    沈念sama閱讀 43,601評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡舷夺,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,066評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了售貌。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片给猾。...
    茶點(diǎn)故事閱讀 38,161評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖颂跨,靈堂內(nèi)的尸體忽然破棺而出耙册,到底是詐尸還是另有隱情,我是刑警寧澤毫捣,帶...
    沈念sama閱讀 33,792評(píng)論 4 323
  • 正文 年R本政府宣布,位于F島的核電站帝际,受9級(jí)特大地震影響蔓同,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蹲诀,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,351評(píng)論 3 307
  • 文/蒙蒙 一斑粱、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧脯爪,春花似錦则北、人聲如沸矿微。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,352評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)涌矢。三九已至,卻和暖如春快骗,著一層夾襖步出監(jiān)牢的瞬間娜庇,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 31,584評(píng)論 1 261
  • 我被黑心中介騙來(lái)泰國(guó)打工方篮, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留名秀,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,618評(píng)論 2 355
  • 正文 我出身青樓藕溅,卻偏偏與公主長(zhǎng)得像匕得,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子巾表,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,916評(píng)論 2 344

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