vue項(xiàng)目是如何運(yùn)行起來的
vue項(xiàng)目如何運(yùn)行
涉及到的項(xiàng)目文件
最近因?yàn)楣卷?xiàng)目問題,開始學(xué)習(xí)vue。萬事開頭難,開始寫博客,紀(jì)錄一下小白的成長,也方便以后看
- index.html >主頁,項(xiàng)目入口
- main.js >main.js是我們的入口文件,主要作用是初始化vue實(shí)例,并引入所需要的插件
- App.vue > 根組件 所有頁面都是在App.vue下進(jìn)行切換的
- router/index.js >路由文件
index.html,main.js,App.vue 三者關(guān)系
在網(wǎng)頁的Title部分,加載了index.html中定義的Title,而在正文部分,加載了App.vue中定義的部分
<div id="app">來自index.html正文中的內(nèi)容</div>
上面有一個(gè)id為app的掛載點(diǎn),之后我們的Vue根實(shí)例就會掛載到該掛載點(diǎn)上;
new Vue({ ? el: '#app',//告訴該實(shí)例要掛載的地方;(即實(shí)例裝載到index.html中的位置) ? router, ? components: { App },//注冊了一個(gè)局部組件App ? template: '<App/>'//模板就是組件App.vue中的template中的內(nèi)容。(template會替代原來的的掛載點(diǎn)處的內(nèi)容) })
小結(jié)
在項(xiàng)目運(yùn)行中,main.js作為項(xiàng)目的入口文件,運(yùn)行中,找到其實(shí)例需要掛載的位置,即index.html中,剛開始,index.html的掛載點(diǎn)處的內(nèi)容會被顯示,但是隨后就被實(shí)例中的組件中的模板中的內(nèi)容所取代,所以我們會看到有那么一瞬間會顯示出index.html中正文的內(nèi)容。
- node_modules為依賴的模塊
- config中配置了路徑端口值等
- build中配置了webpack的基本配置、開發(fā)環(huán)境配置、生產(chǎn)環(huán)境配置等
vue踩坑記錄:vue項(xiàng)目運(yùn)行卡在百分之幾幾幾
今天晚上打著游戲,同事突然叫我拉項(xiàng)目下來運(yùn)行,我打完就去拉代碼了,結(jié)果vue項(xiàng)目運(yùn)行卡在66%不動了,我也是百度一下分享別人怎么解決的文章給他,繼續(xù)我的游戲!
結(jié)果呢?
游戲結(jié)束后,我拉代碼,還是這個(gè)錯(cuò)!我也按照給他的文章做了一遍,還是卡著!隨后就是漫長的探索找八哥~~~~~~~。
換掉腳手架版本~~~卡了?。?!
卸載axios~~~~~~卡著?。。。?/p>
刪除node_modules文件夾,在install,,卡?。。。?!
改npm鏡像!在阿里和原生鏡像反復(fù)橫跳~~~~~
。。。。。。。。。。。。。。。。。。
沒法子了!看代碼吧!項(xiàng)目運(yùn)行又沒有報(bào)錯(cuò)!我哪知道有啥問題呀 AQA
結(jié)果我在他的一個(gè)vue文件中中看到了一些綠綠的東西
把div合起來?。?!
我去?。。。?/p>
在<template>標(biāo)簽上有兩個(gè)根DIV,還有這種操作???????
合并沖突吧,運(yùn)行吧,不卡了!
提交代碼之后一定要合并沖突!
一定要合并沖突!
要合并沖突!
合并沖突!
沖突!?。。。。。。?!
誰都不想要綠綠的東西?。。?/strong>
盡量別在git控制臺提交!在編譯器提交,有沖突會提示!再拉代碼下來合并沖突再提交??!
摸了摸我的頭!
頭發(fā)又少了幾根了!
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
前端通過vue調(diào)用后端接口導(dǎo)出excel表格基本步驟
在Vue前端項(xiàng)目中,可通過axios庫發(fā)送請求至后端獲取Excel下載鏈接,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-10-10在vue-cli項(xiàng)目中使用bootstrap的方法示例
本篇文章主要介紹了在vue-cli項(xiàng)目中使用bootstrap的方法示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04vue+elementUl導(dǎo)入文件方式(判斷文件格式)
這篇文章主要介紹了vue+elementUl導(dǎo)入文件方式(判斷文件格式),具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08解決vue中post方式提交數(shù)據(jù)后臺無法接收的問題
今天小編就為大家分享一篇解決vue中post方式提交數(shù)據(jù)后臺無法接收的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08vue3?reactive響應(yīng)式依賴收集派發(fā)更新原理解析
這篇文章主要為大家介紹了vue3響應(yīng)式reactive依賴收集派發(fā)更新原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03vue中實(shí)時(shí)監(jiān)聽div元素盒子的寬高方法
這篇文章主要給大家介紹了關(guān)于vue中如何實(shí)時(shí)監(jiān)聽div元素盒子的寬高的相關(guān)資料,在Vue中你可以使用Vue的計(jì)算屬性和偵聽器來動態(tài)監(jiān)測元素的高度,文中給出了簡單代碼示例,需要的朋友可以參考下2023-09-09Vuex利用state保存新聞數(shù)據(jù)實(shí)例
本篇文章主要介紹了Vuex利用state保存新聞數(shù)據(jù)實(shí)例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06詳解element上傳組件before-remove鉤子問題解決
這篇文章主要介紹了詳解element上傳組件before-remove鉤子問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04