vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue项目debugger调试

前端vue项目debugger调试操作详解

作者:有语忆语

在vue项目调试的时候,代码里面标注debugger,这篇文章主要给大家介绍了关于前端vue项目debugger调试操作的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下

一、前言

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

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

二、操作

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

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

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

3.1模块划分

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 项目中,文件的加载顺序可以归纳为以下几个方面:

入口文件加载:

根组件加载:

路由文件加载:

状态管理文件加载:

组件加载:

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

静态资源加载:

工具类和插件加载:

配置文件加载:

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

总结

到此这篇关于前端vue项目debugger调试操作的文章就介绍到这了,更多相关vue项目debugger调试内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文