PHP手机网站开发工程师,有什么网站是专做婚礼素材的,视觉传达设计主要学什么,江西省网站建设先进表彰一、前言
有的时候接受同事一个项目#xff0c;用框架不一样#xff0c;写的也不太规范#xff0c;那么就需要打断点去学习改项目的流程了。 那么vue项目是如何debugger调试呢#xff1f;
二、操作
大概理解一下#xff0c;vue项目启动#xff0c;大概是先启动框架用框架不一样写的也不太规范那么就需要打断点去学习改项目的流程了。 那么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.storevuex相关配置存放\vue中的状态数据 3.9.types:类型 3.10.utils:工具类 3.11.views路由对应的文件 3.12.App.vue路由组件的顶层路由 3.13.main.tsvue入口文件 4. .editorconfig是帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式规范的工具 5. .envVue项目中.env文件是运行项目时的环境配置文件。但是在实际开发过程中有本地开发环境、测试环境、生产环境等不同环境对应的配置会不一样。 因此需要通过不同的.env文件实现差异化配置。 6. .gitignore就是git软件要忽略的文件列表. 如果要忽略某些文件,在Git工作区的根目录下创建一个特殊的.gitignore文件,然后把要忽略的文件名填进去,Git就会自动忽略这些文件。 8.babel.config.jsBabel是一个JS编译器主要作用是将ECMAScript 2015 版本的代码转换为向后兼容的JS语法以便能够运行在当前和旧版本的浏览器或其它环境中。 9.ecp-vue.imliml是配置文件,存着当前project的一些配置信息。 10. index.html主页面文件也是入口文件 11. package.json应用包配置文件 12. README.md: 应用描述说明的 readme 文件 13.vite.config.tsvite.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/可以用来存放工具类jsassets/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
