一、前言

有的時(shí)候接受同事一個(gè)項(xiàng)目，用框架不一樣，寫(xiě)的也不太規(guī)范，那么就需要打斷點(diǎn)去學(xué)習(xí)改項(xiàng)目的流程了。

那么vue項(xiàng)目是如何debugger調(diào)試呢？

二、操作

大概理解一下，vue項(xiàng)目啟動(dòng)，大概是先啟動(dòng)框架，然后把項(xiàng)目映射到內(nèi)存或者框架中，所以打斷點(diǎn)就算在代碼中打斷點(diǎn)，在初始化項(xiàng)目的時(shí)候也不會(huì)執(zhí)行到斷點(diǎn)，只有在刷新頁(yè)面的時(shí)候才會(huì)執(zhí)行項(xiàng)目流程，走到斷點(diǎn)處；

可以在index.html中打斷點(diǎn)，然后刷新頁(yè)面，就可以看到vue項(xiàng)目執(zhí)行流程了，如果代碼寫(xiě)錯(cuò)了，就會(huì)npm run dev 失敗，也就是項(xiàng)目加載不成功會(huì)具體報(bào)錯(cuò)到代碼，項(xiàng)目啟動(dòng)成功，刷新頁(yè)面可以根據(jù)打的斷點(diǎn)查看執(zhí)行流程，加載完項(xiàng)目，在內(nèi)存映射中打斷點(diǎn)，再刷新下頁(yè)面，就可以看到寫(xiě)的vue執(zhí)行流程了。

三、renren-ui項(xiàng)目模塊劃分與執(zhí)行流程

3.1模塊劃分

• 1.node_modules：安裝的依賴(lài)包
• 2.public：公共的靜態(tài)資源
• 3.src：放的是核心的開(kāi)發(fā)組件和文件
  • 3.1.assets：放一些靜態(tài)資源，例如圖片、圖標(biāo)、字體、less文件
  • 3.2.components：公共組件
  • 3.3.constants:一些常量定義
  • 3.4.hooks:鉤子函數(shù)
  • 3.5.layout:布局
  • 3.6.router：路由相關(guān)配置
  • 3.7.service:服務(wù)
  • 3.8.store：vuex相關(guān)配置，存放\vue中的狀態(tài)數(shù)據(jù)
  • 3.9.types:類(lèi)型
  • 3.10.utils:工具類(lèi)
  • 3.11.views：路由對(duì)應(yīng)的文件
  • 3.12.App.vue：路由組件的頂層路由
  • 3.13.main.ts：vue入口文件
• 4. .editorconfig：是幫助開(kāi)發(fā)人員在不同的編輯器和IDE之間定義和維護(hù)一致的編碼樣式規(guī)范的工具
• 5. .env：Vue項(xiàng)目中，.env文件是運(yùn)行項(xiàng)目時(shí)的環(huán)境配置文件。但是在實(shí)際開(kāi)發(fā)過(guò)程中，有本地開(kāi)發(fā)環(huán)境、測(cè)試環(huán)境、生產(chǎn)環(huán)境等，不同環(huán)境對(duì)應(yīng)的配置會(huì)不一樣。
• 因此，需要通過(guò)不同的.env文件實(shí)現(xiàn)差異化配置。
• 6. .gitignore：就是git軟件要忽略的文件列表. 如果要忽略某些文件,在Git工作區(qū)的根目錄下創(chuàng)建一個(gè)特殊的.gitignore文件,然后把要忽略的文件名填進(jìn)去,Git就會(huì)自動(dòng)忽略這些文件。
• 8.babel.config.js：Babel是一個(gè)JS編譯器，主要作用是將ECMAScript 2015+ 版本的代碼，轉(zhuǎn)換為向后兼容的JS語(yǔ)法，以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其它環(huán)境中。
• 9.ecp-vue.iml：iml是配置文件,存著當(dāng)前project的一些配置信息。
• 10. index.html：主頁(yè)面文件，也是入口文件
• 11. package.json：應(yīng)用包配置文件
• 12. README.md: 應(yīng)用描述說(shuō)明的 readme 文件
• 13.vite.config.ts：vite.config.ts 是一個(gè)可選的配置文件，如果項(xiàng)目的 (和 package.json 同級(jí)的) 根目錄中存在這個(gè)文件，那么它會(huì)被 @vue/cli-service 自動(dòng)加載。

1.src目錄

main. js是我們的入口文件，整個(gè)項(xiàng)目工程入口，用于全局配置，主要作用是初始化vue實(shí)例并使用需要的插件。

import { crearteApp } from 'vue';
import App from './App';
crearteApp(App).mount('#app'); //掛載方法，將vue的根實(shí)例掛載到id為'#app'的空間里去，從而實(shí)現(xiàn)數(shù)據(jù)雙向綁定

2.App.vue

App. vue是我們的根組件(使用標(biāo)簽渲染整個(gè)工程的.vue組件) ，所有頁(yè)面都是在App. vue下進(jìn)行切換的。其實(shí)你也可以理解為所有的路由也是App. vue的子組件。所以我們將router 標(biāo)示為App. vue的子組件。

3.assets文件

assets放可能會(huì)變動(dòng)的文件

assets目錄中的文件，會(huì)被合并到一個(gè)文件中，然后進(jìn)行壓縮。多用來(lái)存放業(yè)務(wù)級(jí)的js、css等，如一些全局的scss樣式文件、全局的工具類(lèi)js文件等。

拓展: assets目錄中可以自己分化出不同地子目錄，用來(lái)根據(jù)自己的需求存放文件。如assets/util/可以用來(lái)存放工具類(lèi)js，assets/api/ 可以用來(lái)存放業(yè)務(wù)接口js等等。

assets目錄中的文件會(huì)被webpack處理解析為模塊依賴(lài)，只支持絕對(duì)路徑形式。

4.components文件

components:目錄里面放了一個(gè)組件文件，可以不用。通常建議將可重用的視圖放置在src/ components目錄中。諸如頁(yè)眉， 頁(yè)腳，廣告，網(wǎng)格或任何自定義控件之類(lèi)的示例，如樣式化的文本框或按鈕。可以在視圖內(nèi)部訪問(wèn)一個(gè)或多個(gè)組件。

5.views文件夾

vi ews文件夾用來(lái)存放“頁(yè)面”。一個(gè)視圖可以具有一個(gè)或多個(gè)組件，并且一個(gè)視圖實(shí)際上打算由導(dǎo)航URL訪問(wèn)。它們通常放在src/views。

6.router文件(路由器及路由的配置)

在項(xiàng)目中使用vue-router管理路由，分為以下幾步

第一步:在終端(terminal)中安裝vue-router

npm install -g vue-router

第二步:在src目錄下創(chuàng)建一-個(gè)router文件夾，在這個(gè)文件夾下創(chuàng)建router. js ( 也可以和main. js平級(jí)，直接創(chuàng)建router. js)，在router. js文件中配置相應(yīng)的信息

第三步:入口文件main. js中引入路由實(shí)例router，然后在根實(shí)例中注冊(cè)

7.store文件夾

store文件夾：存放\vue中的狀態(tài)數(shù)據(jù)，用vuex集中管理

8.public

該文件夾可以用來(lái)存放靜態(tài)資源，存放在該文件夾的東西不會(huì)被打包影響，而是會(huì)原封不動(dòng)的輸出到dist文件夾中，和vuecli2中的static文件夾一樣的。

pubilc/index.html是一個(gè)模板文件，index.html是一個(gè)總的入口文件，作用是生成項(xiàng)目的入口文件。

vue是單頁(yè)面應(yīng)用，掛在id為app的div下然后動(dòng)態(tài)渲染路由模板，在index.html的body體中只有一個(gè)div標(biāo)簽， 其id為app,這個(gè)id將會(huì)連接到src/main. js內(nèi)容，src中所有的編譯打包后在publ ic下index.html中app里面，webpack打包的js, css也會(huì)自動(dòng)注入到該頁(yè)面中。我們?yōu)g覽器訪問(wèn)項(xiàng)目的時(shí)候就會(huì)默認(rèn)打開(kāi)生成好的index.html

3.2、何時(shí)使用public 文件夾？

你需要在構(gòu)建輸出中指定-一個(gè)文件的名字。

你有上千個(gè)圖片，需要?jiǎng)討B(tài)引用它們的路徑。

有些庫(kù)可能和webpack不兼容，這時(shí)你除了將其用一個(gè)獨(dú)立的script標(biāo)簽引入沒(méi)有別的選擇。

3.3、項(xiàng)目整體運(yùn)行流程

先后順序

index.html > App.vue的export外的js代碼 > main.js > App.vue的export里面的js代碼 >

1、按照上面的先后順序打斷點(diǎn)，刷新頁(yè)面發(fā)現(xiàn)直接到index.html里面

2、繼續(xù)執(zhí)行debugger,發(fā)現(xiàn)到App.vue的export外的js代碼

3、繼續(xù)執(zhí)行，到main.js代碼

4、到App.vue的export里面的js代碼

5、執(zhí)行第一行代碼，看看用到了哪個(gè)模塊就進(jìn)入到哪里，這里用到了store,下一步就是store的index.ts

3.4、文件加載流程

在一個(gè)典型的 Vue 項(xiàng)目中，文件的加載順序可以歸納為以下幾個(gè)方面：

入口文件加載：

• main.js：通常作為項(xiàng)目的入口文件，負(fù)責(zé)初始化 Vue 應(yīng)用，加載根組件，并掛載到 DOM 上。

根組件加載：

• App.vue：根組件是整個(gè) Vue 應(yīng)用的最頂層組件，包含了應(yīng)用的整體結(jié)構(gòu)和布局。

路由文件加載：

• router/index.js：負(fù)責(zé)配置應(yīng)用的路由，包括定義路由表、路由守衛(wèi)等。

狀態(tài)管理文件加載：

• store/index.js：負(fù)責(zé)配置應(yīng)用的狀態(tài)管理，例如使用 Vuex 進(jìn)行全局狀態(tài)管理，包括定義狀態(tài)、mutations、actions 等。

組件加載：

• .vue 文件：Vue 組件文件，通常包括組件的模板、樣式和邏輯。

組件按需加載：在頁(yè)面上使用到的組件會(huì)在需要的時(shí)候被動(dòng)態(tài)加載，以優(yōu)化頁(yè)面加載速度。

靜態(tài)資源加載：

• 圖片、字體、樣式文件等靜態(tài)資源的加載。

工具類(lèi)和插件加載：

• utils 目錄下的工具類(lèi)文件、plugins 目錄下的 Vue 插件等。

配置文件加載：

• vue.config.js：Vue 項(xiàng)目的配置文件，用于配置構(gòu)建工具和插件等。
• .env 文件：用于配置環(huán)境變量。
• babel.config.js：Babel 的配置文件。

總的來(lái)說(shuō)，Vue 項(xiàng)目的文件加載順序通常是從入口文件開(kāi)始，依次加載根組件、路由、狀態(tài)管理、組件、靜態(tài)資源等，最終完成整個(gè)應(yīng)用的初始化和渲染。

總結(jié)

到此這篇關(guān)于前端vue項(xiàng)目debugger調(diào)試操作的文章就介紹到這了,更多相關(guān)vue項(xiàng)目debugger調(diào)試內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論