前端-vue项目debugger调试

有语忆语 2024-06-13 15:03:10 阅读 97

一、前言

有的时候接受同事一个项目,用框架不一样,写的也不太规范,那么就需要打断点去学习改项目的流程了。

那么vue项目是如何debugger调试呢?

二、操作

大概理解一下,vue项目启动,大概是先启动框架,然后把项目映射到内存或者框架中,所以打断点就算在代码中打断点,在初始化项目的时候也不会执行到断点,只有在刷新页面的时候才会执行项目流程,走到断点处;

可以在index.html中打断点,然后刷新页面,就可以看到vue项目执行流程了,如果代码写错了,就会npm run dev 失败,也就是项目加载不成功会具体报错到代码,项目启动成功,刷新页面可以根据打的断点查看执行流程,加载完项目,在内存映射中打断点,再刷新下页面,就可以看到写的vue执行流程了。

在这里插入图片描述

在这里插入图片描述

三、renren-ui项目模块划分与执行流程

3.1模块划分

在这里插入图片描述

在这里插入图片描述

1.node_modules:安装的依赖包

2.public:公共的静态资源

3.src:放的是核心的开发组件和文件

3.1.assets:放一些静态资源,例如图片、图标、字体、less文件

3.2.components:公共组件

3.3.constants:一些常量定义

3.4.hooks:钩子函数

3.5.layout:布局

3.6.router:路由相关配置

3.7.service:服务

3.8.store:vuex相关配置,存放\vue中的状态数据

3.9.types:类型

3.10.utils:工具类

3.11.views:路由对应的文件

3.12.App.vue:路由组件的顶层路由

3.13.main.ts:vue入口文件

4. .editorconfig:是帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式规范的工具

5. .env:Vue项目中,.env文件是运行项目时的环境配置文件。但是在实际开发过程中,有本地开发环境、测试环境、生产环境等,不同环境对应的配置会不一样。

因此,需要通过不同的.env文件实现差异化配置。

6. .gitignore:就是git软件要忽略的文件列表. 如果要忽略某些文件,在Git工作区的根目录下创建一个特殊的.gitignore文件,然后把要忽略的文件名填进去,Git就会自动忽略这些文件。

8.babel.config.js:Babel是一个JS编译器,主要作用是将ECMAScript 2015+ 版本的代码,转换为向后兼容的JS语法,以便能够运行在当前和旧版本的浏览器或其它环境中。

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'的空间里去,从而实现数据双向绑定

2.App.vue

App. vue是我们的根组件(使用标签渲染整个工程的.vue组件) ,所有页面都是在App. vue下进行切换的。其实你也可以理解为所有的路由也是App. vue的子组件。所以我们将router 标示为App. vue的子组件。

3.assets文件

assets放可能会变动的文件

assets目录中的文件,会被合并到一个文件中,然后进行压缩。多用来存放业务级的js、css等,如一些全局的scss样式文件、全局的工具类js文件等。

拓展: assets目录中可以自己分化出不同地子目录,用来根据自己的需求存放文件。如assets/util/可以用来存放工具类js,assets/api/ 可以用来存放业务接口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目录下创建一-个router文件夹,在这个文件夹下创建router. js ( 也可以和main. js平级,直接创建router. js),在router. js文件中配置相应的信息

第三步:入口文件main. js中引入路由实例router,然后在根实例中注册

在这里插入图片描述

7.store文件

store文件夹:存放\vue中的状态数据,用vuex集中管理

8.public

该文件夹可以用来存放静态资源,存放在该文件夹的东西不会被打包影响,而是会原封不动的输出到dist文件夹中,和vuecli2中的static文件夹一样的。

pubilc/index.html是一个模板文件,index.html是一个总的入口文件,作用是生成项目的入口文件。

vue是单页面应用,挂在id为app的div下然后动态渲染路由模板,在index.html的body体中只有一个div标签, 其id为app,这个id将会连接到src/main. js内容,src中所有的编译打包后在publ ic下index.html中app里面,webpack打包的js, css也会自动注入到该页面中。我们浏览器访问项目的时候就会默认打开生成好的index.html

3.2、何时使用public 文件夹?

你需要在构建输出中指定-一个文件的名字。

你有上千个图片,需要动态引用它们的路径。

有些库可能和webpack不兼容,这时你除了将其用一个独立的script标签引入没有别的选择。

3.3、项目整体运行流程

先后顺序

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

1、按照上面的先后顺序打断点,刷新页面发现直接到index.html里面

在这里插入图片描述

2、继续执行debugger,发现到App.vue的export外的js代码

在这里插入图片描述

3、继续执行,到main.js代码

在这里插入图片描述

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

在这里插入图片描述

5、执行第一行代码,看看用到了哪个模块就进入到哪里,这里用到了store,下一步就是store的index.ts

3.4、文件加载流程

在一个典型的 Vue 项目中,文件的加载顺序可以归纳为以下几个方面:

入口文件加载:

main.js:通常作为项目的入口文件,负责初始化 Vue 应用,加载根组件,并挂载到 DOM 上。

根组件加载:

App.vue:根组件是整个 Vue 应用的最顶层组件,包含了应用的整体结构和布局。

路由文件加载:

router/index.js:负责配置应用的路由,包括定义路由表、路由守卫等。

状态管理文件加载:

store/index.js:负责配置应用的状态管理,例如使用 Vuex 进行全局状态管理,包括定义状态、mutations、actions 等。

组件加载:

.vue 文件:Vue 组件文件,通常包括组件的模板、样式和逻辑。

组件按需加载:在页面上使用到的组件会在需要的时候被动态加载,以优化页面加载速度。

静态资源加载:

图片、字体、样式文件等静态资源的加载。

工具类和插件加载:

utils 目录下的工具类文件、plugins 目录下的 Vue 插件等。

配置文件加载:

vue.config.js:Vue 项目的配置文件,用于配置构建工具和插件等。

.env 文件:用于配置环境变量。

babel.config.js:Babel 的配置文件。

总的来说,Vue 项目的文件加载顺序通常是从入口文件开始,依次加载根组件、路由、状态管理、组件、静态资源等,最终完成整个应用的初始化和渲染。



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。