Vue ：components: {App }和template: ‘＜App/＞‘的使用，及webpack初始化时模块间的逻辑

已于 2022-09-23 17:46:28 修改
阅读量343 收藏
点赞数
文章标签： vue.js webpack 前端
于 2022-09-23 17:42:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/W0lker/article/details/127014315
版权

初学vue，记录一下细节

这是一开始时脚手架自动生成的
在这里插入图片描述
把缩写的还原
在这里插入图片描述
这个标签在vue里就是引用组件的意思,而App就在上面刚刚导入的
在这里插入图片描述
所以出现的页面就为App.vue
在这里插入图片描述
在看看App.Vue里的代码
在这里插入图片描述
有一个 < router-view> ,而此时的路由中又只有一个HelloWorld.vue，所以它被并入页面中
整个过程如下：请添加图片描述

W0lker
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
Template_App_Tomcat.xml
08-27
模板支持自动发现终端监控项，根据参数自动更新canshu 使用说明详见博客
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
10-14
总结来说，main.js是应用的核心，负责初始化Vue实例和配置；App.vue是应用的顶级组件，提供了一个容器来展示路由切换的各个视图；page/index.vue等页面组件则代表具体的视图，它们可以通过路由被渲染到App.vue的`...
vue中template:‘＜App/＞‘及components:{App}这种写法是什么意思？
song854601134的博客
12-12 1250
App Components（应用组件）
莫高雷草原
04-15 1618
文章转载禁止用于商业用途，且不能带有虚拟货币、积分、注册等附加条件。转载须注明出处莫高雷草原以及作者@JiongBull。 访问Android API指南目录索引查看全部翻译 应用组件 Android应用框架可以让你使用可重用的组件来创造丰富且创新的引用。本节将向你介绍如何使用这些组件来构建你的应用的模块，以及如何使用intent将它们联系起来。 INTENTS A
关于render: h =＞ h(App)和components: { App }的区别
song854601134的博客
12-12 773
关于render: h => h(App)和components: { App }的区别 在main.js中：常会有 new Vue({ el: ‘#app’, router,//实例化，表示会使用 render: h => h(App)//vue2.0写法 //以下是vue1.0的写法 //components: { App },//注册组件信息 // template: ‘’//简写的模板调用组件的标签 }) components: { App } template: ‘’ 或者 rende
render: c => c(app)和components: { App }
zzjj6543212的博客
04-01 1289
作用一样。前者是vue2.0写法。后者是vue1.0写法~
详解使用vue-cli脚手架初始化Vue项目下的项目结构
11-28
它极大地简化了Vue项目的初始化和配置过程，为开发者提供了现代化的前端开发流程。Vue CLI支持快速创建新项目，内置热重载、静态检查等功能，并且能够生成适合生产环境的构建配置。 使用Vue CLI的优势主要包括以下...
vite-vue3-template:Vite + Vue3项目模板
03-18
- `main.ts`：项目入口文件，初始化Vue实例和Vite配置。 在开始使用这个模板时，你需要根据自己的需求修改`main.ts`和`src`目录下的文件，配置路由、添加组件、调整样式，并利用Vue 3的新特性编写应用。Vite的快速...
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
08-29
2. 使用vue-cli初始化一个基于webpack的项目：`vue init webpack vue-demo` 3. 进入项目目录：`cd vue-demo` 4. 安装所有依赖包：`npm install` 5. 运行项目：`npm run dev` 接下来，我们将探讨父子组件通信的两种...
laravue：在Laravel内部使用vue
02-17
在`resources/js/app.js`文件中，你可以看到Vue已经被引入并初始化。 在Laravel中创建Vue组件，通常我们会新建一个`components`目录，在其中定义Vue单文件组件（SFCs）。SFCs包含模板、脚本和样式，结构清晰，易于...
TemplateAppProject:android项目
03-31
xxx
关于vuejs的入口问题 - template: '<App/>'
weixin_30576859的博客
04-19 631
1. 主要文件 project目录下index.html文件 project/src目录下的main.js project/src目录下的app.vue 2. 关系 index.html文件下 <body> <div id="{字段1}" class="test">{index文件中div块中的内容.msg}</div> <!-- {&...
vue实例中template: App,这样写是什么意思
愿世界和平
05-28 1万+
vue实例中template: ‘’,这样写是什么意思 官网的描述： 模板将会替换挂载的元素。挂载元素的内容都将被忽略 也就是说:template: ‘’ 表示用替换index.html里面的 如果还是不明白，改成这样子就好理解了： index.html main.js new Vue({ el:’#myapp’, router, compo...
VUE components和template配合使用
我想请你吃糖的博客
05-14 650
1.首先在VUE.JS中引用我们写好的VUE视图对象 2.接下来在HTML部分去使用我们引用的组件 MissionRecordOverviewPanel, PullableListContentPanel 这里要注意，在HTML部分中引用组件的命名规则要从PascalCase(首字母大写的驼峰命名法)→kebab-case(短横线分隔命名)，这是VUE的规定，否则无法引用组件，例如： MissionRecordOverviewPanel → mission-record-overview-pa
vue实例中template: App
Alphr的博客
05-03 1651
官网的描述： 模板将会替换挂载的元素。挂载元素的内容都将被忽略 也就是说:template: ‘’ 表示用替换index.html里面的 举个例子： main.js: ------------------ import App from '@/App' new Vue({ el: '#app', components:{App}, template: '<App/>' }) ...
vue 组件 Vue.component 用法
qq_28134589的博客
06-30 1099
Vue插槽，是学习vue中必不可少的一节，当初刚接触vue的时候，对这些掌握的一知半解，特别是作用域插槽一直没明白。 后面越来越发现插槽的好用。 1、插槽内可以放置什么内容？ 2、默认插槽 3、具名插槽 4、作用域插槽 一、插槽内容 一句话：插槽内可以是任意内容。 <div id="app"> <child-component></child-component> </div> <script> Vue.component('ch
浅谈Vue下的components模板
热门推荐
金城阿武的博客
05-30 4万+
浅谈Vue下的components模板 晴 微风 温度 12-24°C 在我们越来越深入Vue时，我们会发现我们对HTML代码的工程量会越来越少，今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单的写一段components代码 (局部方法创造模板) &lt;div id="app"&gt; &lt;haha&...
Android 开发之 App Components
AnalyzeSystem的博客
09-09 1193
Android的应用程序框架允许您创建丰富和创新应用使用一组可重用的组件。本篇解释如何构建的组件定义应用程序的构建块,并使用意图如何连接在一起。 Intents and Intent Filters Activities Services Content Providers App Widgets Processes and Threads Intent Type可分为显式意图（Expli
Vue2教程详解五（组件）
一只努力搬砖的打工妹纸
02-21 1768
组件是可复用的Vue实例，因此它们与new Vue接收相同的选项，如data、computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样跟实例特有的选项。 组件是用来实现局部（特定）功能效果的代码(html/css/js)和资源(mp3/mp4/ttf/zip)的集合等 组件的优势：可复用代码，简化项目编码，提高运行效率; 组件的分类：单文件组件（一个文件中只包含有一个组件，大型项目中多用此方法）、非单文件组件（一个文件中包含有n个组件）；局...
new Vue({ el: '#app', components: {App}, template: '<App/>' })
最新发布
06-12
其中，el选项指定了Vue实例将要挂载的元素，components选项是用来注册组件的，template选项则是指定Vue实例的模板，这个模板中使用了注册的App组件。App组件是一个Vue组件，它的实现可以在代码中找到。当Vue实例被...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

W0lker

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值