vue腳手架及vue-router基本使用
首先在大前提vue-cli已經(jīng)安裝好的情況下,并且cnpm install
后(官網(wǎng)使用的是npm,但這里推薦用cnpm比npm快而且npm有時(shí)候會(huì)有出現(xiàn)卡住的現(xiàn)象),這里有個(gè)小提醒就是關(guān)于是否開(kāi)啟eslint,這個(gè)是對(duì)你寫(xiě)的代碼進(jìn)行規(guī)范化的一個(gè)工具,對(duì)于剛接觸的新手們建議關(guān)閉,不然代碼寫(xiě)的不符合它的規(guī)范你的編譯器會(huì)一直報(bào)錯(cuò),如下圖
安裝好腳手架之后就像這樣
終端輸入npm run dev
,然后打開(kāi)localhost:8080就可以看到項(xiàng)目運(yùn)行啦
大致分析一下幾個(gè)比較常用的文件把,如下圖
1.build:主要用來(lái)配置構(gòu)建項(xiàng)目以及webpack
2.config:項(xiàng)目開(kāi)發(fā)配置
3.npm或者cnpm所下載的依賴(lài)包
4.你的源代碼
5.靜態(tài)文件夾,webpack打包時(shí)不會(huì)打包這里文件
6.最外層的頁(yè)面一般title等都設(shè)置在這里
7.存放你要npm依賴(lài)包的json數(shù)據(jù)
大致介紹完項(xiàng)目結(jié)構(gòu),我們一起看看它頁(yè)面的源碼吧!
先從這個(gè)App.vue開(kāi)始,這個(gè)文件僅此于外部的index意思就是index包含所有頁(yè)面,而App.vue包含除了index的頁(yè)面,也就是路由嵌套,后面會(huì)說(shuō)到,在這里所創(chuàng)建的文件都是文件名.vue,頁(yè)面的html格式就是一個(gè)template標(biāo)簽中包含一個(gè)div,相當(dāng)于組件化的形式,而組件的內(nèi)容寫(xiě)在這個(gè)div中(一個(gè)頁(yè)面必須只有一個(gè)template包一個(gè)div,內(nèi)容寫(xiě)在這個(gè)div中,不然會(huì)報(bào)錯(cuò)),而這個(gè)router-view標(biāo)簽就是當(dāng)前頁(yè)面下的子頁(yè)面,可以理解成這個(gè)router-view是另一個(gè)頁(yè)面,被當(dāng)前頁(yè)面所包含著,有點(diǎn)類(lèi)似ifame標(biāo)簽的功能。
css,js格式
現(xiàn)在我們來(lái)看看HelloWorld.vue這個(gè)頁(yè)面,這里js,css的代碼放置格式它已經(jīng)幫你寫(xiě)出來(lái)了,按照這種格式寫(xiě)就行了,需要提醒的就是style標(biāo)簽中的scoped屬性,如果沒(méi)寫(xiě)這條那么這個(gè)style的樣式會(huì)影響到這個(gè)頁(yè)面所有的子路由,如果加了那么這個(gè)樣式只對(duì)當(dāng)前頁(yè)面起作用
看完頁(yè)面我們看看路由的配置如下圖
路由的路徑在router下,剛開(kāi)始打開(kāi)會(huì)看到有報(bào)錯(cuò),其實(shí)不是語(yǔ)法錯(cuò)誤,是因?yàn)榫幾g器默認(rèn)編譯es5的語(yǔ)法,而vue腳手架用的是es6的語(yǔ)法,我用的編譯器是webStorm,只要設(shè)置一下就行了。
簡(jiǎn)單介紹一下routers中的結(jié)構(gòu),這里主要用來(lái)配置路由的,上面說(shuō)過(guò)所有子路由都在A(yíng)pp.vue下,所有App.vue是最外層的父路由,這里的routes中存的就是路由的數(shù)組,path就是你要訪(fǎng)問(wèn)你所創(chuàng)建的頁(yè)面的路徑,這里寫(xiě)的是根路徑序所以你直接訪(fǎng)問(wèn)localhost:8080就會(huì)出現(xiàn)一個(gè)App.vue中插入一個(gè)HelloWorld.vue的頁(yè)面(這個(gè)相當(dāng)于路由嵌套),name想到與給它命名這個(gè)比較無(wú)關(guān)緊要,component相當(dāng)于你要引用的頁(yè)面,這里引用的是HelloWorld.vue這個(gè)頁(yè)面,主要上面的import,這里的HelloWorld是一個(gè)變量,對(duì)應(yīng)上面的路徑文件
現(xiàn)在教大家創(chuàng)建一個(gè)文件,并配置路由
先創(chuàng)建一個(gè)后綴為vue文件,并把最基本的html結(jié)構(gòu)寫(xiě)上
然后配置它的路由,先引入這個(gè)文件用import,然后填寫(xiě)要訪(fǎng)問(wèn)這個(gè)文件的路徑我用/test,所有要打開(kāi)這個(gè)路由就輸入localhost:8080/#/test,在本引入的文件拿到component中
輸入url,一個(gè)APP.vue中嵌套test.vue的頁(yè)面就呈現(xiàn)了
vue腳手架默認(rèn)的路由嵌套就是所有頁(yè)面都嵌套在A(yíng)pp.vue頁(yè)面下,現(xiàn)在教大家自由嵌套自己的頁(yè)面現(xiàn)在我把test頁(yè)面嵌套到HelloWorld.vue頁(yè)面下
首先在HelloWorld.vue界面下加一個(gè)router-view標(biāo)簽
然后配置HelloWorld.vue的子路由
這樣localhost:8080/#/test就是一個(gè)APP.vue嵌套HelloWorld.vue在嵌套test.vue的頁(yè)面了如下圖
這樣簡(jiǎn)單路由嵌套就完成,在說(shuō)說(shuō)路由跳轉(zhuǎn),比如你給一個(gè)按鈕綁定一個(gè)函數(shù),實(shí)現(xiàn)點(diǎn)擊按鈕跳轉(zhuǎn)到test頁(yè)面那在函數(shù)中可以用
this.$router.push({path:'/test'})
如果要回到上一個(gè)頁(yè)面用
this.$router.go(-1)
大致內(nèi)容就是這些,如果有哪里說(shuō)錯(cuò)或者遺憾還望多多包涵,或者聯(lián)系我,大家多交流交流!
總結(jié)
以上所述是小編給大家介紹的vue腳手架及vue-router基本使用,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Vue3+TS+Vant3+Pinia(H5端)配置教程詳解
這篇文章主要介紹了Vue3+TS+Vant3+Pinia(H5端)配置教程詳解,需要的朋友可以參考下2023-01-01Vue 中 a標(biāo)簽上href無(wú)法跳轉(zhuǎn)的解決方式
今天小編大家分享一篇Vue 中 a標(biāo)簽上href無(wú)法跳轉(zhuǎn)的解決方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11vue實(shí)現(xiàn)經(jīng)典選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)經(jīng)典選項(xiàng)卡功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03element el-tooltip動(dòng)態(tài)顯示隱藏(有省略號(hào)顯示,沒(méi)有省略號(hào)不顯示)
本文主要介紹了element el-tooltip動(dòng)態(tài)顯示隱藏,主要實(shí)現(xiàn)有省略號(hào)顯示,沒(méi)有省略號(hào)不顯示,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09為什么Vue3.0使用Proxy實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽(tīng)(defineProperty表示不背這個(gè)鍋)
這篇文章主要介紹了為什么Vue3.0使用Proxy實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽(tīng)?defineProperty表示不背這個(gè)鍋,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10vue2和vue3中provide/inject的基本用法示例
Vue中的provide/inject是一種組件間通信的方式,它允許父組件向子組件傳遞數(shù)據(jù),而不需要通過(guò)props或事件來(lái)實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue2/vue3中provide/inject的基本用法的相關(guān)資料,需要的朋友可以參考下2023-04-04Vue3使用hook封裝媒體查詢(xún)和事件監(jiān)聽(tīng)的代碼示例
這篇文章主要給大家詳細(xì)介紹Vue3如何使用hook封裝媒體查詢(xún)和事件監(jiān)聽(tīng),使得Vue的開(kāi)發(fā)更加絲滑,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),感興趣的同學(xué)跟著小編一起來(lái)學(xué)習(xí)吧2023-07-07