vue项目当我们进入主页时，加载了哪些组件？

最新推荐文章于 2022-09-14 22:09:39 发布
最新推荐文章于 2022-09-14 22:09:39 发布
阅读量497 收藏 1
点赞数 2
分类专栏： 学习笔记 文章标签： vue.js javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hx_programmer/article/details/120751903
版权

 

首先我们可以看到根组件是App.vue

 

 然后可以看到App.vue里面只有一个路由出口,所以我们再去看路由配置文件(router/index.js)

 因为进的是主页所以我们直接看"/"根路径就可以了,可以看到挂载了layout组件(layout/index.vue)

 如图在index.vue挂载了三个子组件分别是Navbar, Sidebar, AppMain

 然后可以看到在AppMain.vue里面可以看到有一个二级路由出口,所以再回到router/index.js

最低0.47元/天 解锁文章
hx_programmer
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 挂载 文件夹的所有组件
好单侠的博客
11-10 233
vue 挂载 文件夹的所有组件
vue 把组件挂载到视图_Vue -- 手动挂载组件
weixin_39901332的博客
12-22 877
[TOC]>[success] # Vue -- 手动挂载组件位置[关于挂载的底层原理代码的解析介绍](https://juejin.im/post/59da1c116fb9a00a4a4cf6dd)~~~1.现在要解决的是如何让我们的组件的可以定义其所在的渲染范围，因为平常在我们写单页面的时候，我们经常在入口文件会写的以下代码：import Vue from 'vue'import App...
认识vue项目的目录以及熟悉src目录
haodanzj的博客
08-16 983
背景 一般进入公司后，会有一段时间（1周左右）来熟悉项目。 目标 认识vue-admin-template的目录 目录结构 本项目已经生成了一个基本的开发框架，提供了涵盖中后台开发的各类功能和现成目录，下面是整个项目的目录结构 ├── build # 构建相关 ├── mock # 项目mock 模拟数据，在接口服务器没有就绪时，临时充当接口 ├── public # 静态资源 │
vue 实现tab切换动态加载不同的组件
weixin_33936401的博客
04-05 2056
vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件。具体看如下代码；这个功能对于vue比较复杂的页面可以使用上，可以把一个页面的功能拆分出来，使代码更简单。使用方式具体看如下代码： 主页面代码如下，分别导入了child1.vue, child2.vue, child3.vue 3个小模块，当点击页面某一项的时候去加载不同的组件。 <style> ...
vue全局组件和局部组件,查看vue挂载的全局组件
神经网络爱好者
09-14 2291
在里进行全局注册Vue.prototype.funcName=function(){}在所有组件里可调用this.funcName();以上这篇vue自定义全局方法,在组件里面的使用介绍就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
vue-cli监听组件加载完成的方法
10-18
在Vue.js开发中，有时我们需要监听组件的加载完成状态，以便在所有组件加载完毕后执行特定的操作。在使用Vue CLI构建项目时，这个问题可以通过结合Vuex的状态管理库来解决。本文将详细介绍如何在Vue CLI项目中监听...
vue+webpack实现异步组件加载的方法
08-28
在Vue中，可以使用异步组件加载来加载组件。在组件中，可以使用`components`选项来定义异步组件。例如： ``` export default { components: { 'child': function(resolve) { require(['./components/child.vue'],...
解决vue动态路由异步加载import组件,加载不到module的问题
10-15
主要介绍了解决vue动态路由异步加载import组件,加载不到module的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
加载 vue 远程代码的组件实例详解
08-28
在 Vue 项目中，我们需要加载远端的代码以便实现异步组件的开发。本文中，我们将使用 Axios 库来请求远端代码。首先，我们需要在组件中定义一个 props 属性来接收父组件提供的请求地址： ```javascript export ...
vue组件（全局，局部，动态加载组件）
10-18
当切换`currentTab`时，`currentTabComponent`会更新，进而改变渲染的组件。同时，利用CSS样式提升用户体验，例如，通过`v-bind:class`来设置按钮的选中状态和`<component>`的样式。 总结： Vue.js组件系统是其...
在做VUE项目时遇到的问题及解决办法：点击不同的标题加载不同的组件，使用路由去切换组件时，第一次进入这个页面没有默认显示的子组件
summer_my_sunshine的博客
08-02 1556
如上图所示，点击【免费注册】按钮，进入到注册页面，我在注册页面区分个人账户和企业账户，点击对应的标题显示对应的子组件，但是发现刚进入页面的时候，是图2那样子，并没有默认选中显示的子组件。原来是因为定义注册页的路由时缺少重定向redirect指向默认的子组件。 【免费注册】按钮定义的路由： <router-link to="/register" class="login-other-...
vue页面中引入其他vue组件
zhiyikeji的博客
11-18 6830
比如说有两个vue组件，app.vue,test.vue 要在app.vue中使用test.vue组件，则需要在app.vue组件中进行注册： 下面举一个简单的例子帮助理解： test.vue: &lt;templete&gt; &lt;div class="test"&gt;&lt;/div&gt; &lt;/templete&gt; &lt;script&gt; expor...
查看vue挂载的全局组件,vue全局组件和局部组件
神经网络爱好者
09-11 1447
在里进行全局注册Vue.prototype.funcName=function(){}在所有组件里可调用this.funcName();以上这篇vue自定义全局方法,在组件里面的使用介绍就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
vue开发后台管理系统_03_设置路由进行不同的页面组件跳转
欢迎
11-05 4829
1：在src/components/下创建一个layout.vue文件，这个是后台管理系统的ui框架 2：在src/components/下创建几个vue文件，需要分类管理时，可以创建文件夹， 比如： home.vue 首页， login.vue 登录页面， user/uersList.vue 用户列表页面， user/roleList.vue 角色列表页面， user/permis...
关于vue项目 vue-admin-template中主页所使用的组件
mmmawo的博客
10-14 1286
一.什么是vue组件 组件是vue当中最强大的功能之一.组件可以扩展HTML元素,封装重用的代码.在较高的层面上,组件是自定义元素.所有的vue组件同时也是vue实例,所以可以接受相同的选项对象(除了一些吭叽特有选项)并且提供相同的生命周期钩子函数. 二.入口程序分析 顶层组件:src/App.vue 入口js文件:src/main.js 路由js文件:src/router/index.js 入口html文件:public/index.html ...
查看vue已安装插件
violajie的博客
06-01 2781
查看vue已安装插件 npm list -g --dept 0
简单了解Vue中的组件
Ghost__H的博客
05-06 143
1.组件的定义 组件其实就是把一整个页面分成很多个小的部分，比如一个页面可以分成头部，尾部等等。这样子，就可以像组装零件一样将组件组合起来形成页面，大大提高了代码的复用性，代码组织起来也更有逻辑。 2.全局组件 全局组件也就是作用域是全局的组件，也就是在这个页面的任何位置都可以使用的组件 <script> //将全局组件hello和world组合起来形成了一个页面 const app = Vue.createApp({ te...
Vue组件看这篇就够了
sky89299的博客
04-11 1032
侦听器-watch 1. 作用：可以侦听data/compute属性值的变化，只要修改了就会触发函数执行,可以侦听Vue的变量 2. 语法：watch:{}和data(){并齐同级 3. 事例： ```vue watch:{ "要侦听的属性名"（newval，oldval）{//newval是现在的值 oldval是之前的值 } } ``` 4. ==侦听器深度侦听（侦听对象）== 事例： ```vue wat
Vue 组件介绍及使用
404源码社区 - Admin404
01-18 495
1. 什么是组件 组件是可复用的 Vue 实例，通过自定义元素实现组件 组件名定义规范: html 不区分大小写，统一使用小写，多个单词使用短横线隔开（art-list） 2. 组件的使用 第一步: 创建组件构造器对象 const notice = Vue.extend({ template: ` <div> <p>国庆放假通知</p> <div>国庆节假期为10.1~10.7,共七天</div> </div> `, });
Vue中如何实现组件的动态加载？
最新发布
07-17
在Vue中，可以使用异步组件来实现组件的动态。异步组件允许在需要时按需加载组件，而不是在应用程序初始化时立即加载所有组件。这可以提高应用程序的初始加载性能。 有多种方式可以实现组件的动态加载，下面介绍两种常用的方法： 1. 使用`Vue.component`方法和`import`关键字： ```javascript // 异步加载组件 const AsyncComponent = () => import('./AsyncComponent.vue'); // 注册异步组件 Vue.component('async-component', AsyncComponent); ``` 在上述示例中，通过import语句异步加载组件文件（如`AsyncComponent.vue`），然后使用`Vue.component`方法注册异步组件。 2. 使用动态import语法和`resolveComponent`函数： ```javascript // 异步加载组件 const AsyncComponent = () => import('./AsyncComponent.vue'); // 在需要使用的地方动态渲染组件 const component = resolveComponent('async-component'); ``` 在上述示例中，使用动态import语法异步加载组件文件，然后使用`resolveComponent`函数获取异步组件的引用，可以在需要的地方进行动态渲染。 无论使用哪种方法，异步组件在初次渲染时不会立即加载，而是在组件被访问或需要时才会进行加载。这样可以减少初始加载时间并提高应用程序的性能。 需要注意的是，动态加载组件可能会导致一些额外的配置和构建步骤，如Webpack的代码分割和按需加载配置。请确保在使用动态加载组件时，已正确配置构建工具和打包工具。 总结：以上是Vue中实现组件动态加载的常见方法。通过使用异步组件，可以按需加载组件，提高应用程序的性能和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值