一、前言

有的時候接受同事一個項目，用框架不一樣，寫的也不太規(guī)范，那么就需要打斷點去學習改項目的流程了。

那么vue項目是如何debugger調試呢？

二、操作

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

可以在index.html中打斷點，然后刷新頁面，就可以看到vue項目執(zhí)行流程了，如果代碼寫錯了，就會npm run dev 失敗，也就是項目加載不成功會具體報錯到代碼，項目啟動成功，刷新頁面可以根據打的斷點查看執(zhí)行流程，加載完項目，在內存映射中打斷點，再刷新下頁面，就可以看到寫的vue執(zhí)行流程了。

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

3.1模塊劃分

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

1.src目錄

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

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

2.App.vue

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

3.assets文件

assets放可能會變動的文件

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

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

assets目錄中的文件會被webpack處理解析為模塊依賴，只支持絕對路徑形式。

4.components文件

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

5.views文件夾

vi ews文件夾用來存放“頁面”。一個視圖可以具有一個或多個組件，并且一個視圖實際上打算由導航URL訪問。它們通常放在src/views。

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

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

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

npm install -g vue-router

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

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

7.store文件夾

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

8.public

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

pubilc/index.html是一個模板文件，index.html是一個總的入口文件，作用是生成項目的入口文件。

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

3.2、何時使用public 文件夾？

你需要在構建輸出中指定-一個文件的名字。

你有上千個圖片，需要動態(tài)引用它們的路徑。

有些庫可能和webpack不兼容，這時你除了將其用一個獨立的script標簽引入沒有別的選擇。

3.3、項目整體運行流程

先后順序

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

1、按照上面的先后順序打斷點，刷新頁面發(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í)行第一行代碼，看看用到了哪個模塊就進入到哪里，這里用到了store,下一步就是store的index.ts

3.4、文件加載流程

在一個典型的 Vue 項目中，文件的加載順序可以歸納為以下幾個方面：

入口文件加載：

• main.js：通常作為項目的入口文件，負責初始化 Vue 應用，加載根組件，并掛載到 DOM 上。

根組件加載：

• App.vue：根組件是整個 Vue 應用的最頂層組件，包含了應用的整體結構和布局。

路由文件加載：

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

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

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

組件加載：

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

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

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

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

工具類和插件加載：

• utils 目錄下的工具類文件、plugins 目錄下的 Vue 插件等。

配置文件加載：

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

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

總結

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

最新評論