vue根目录下的index.html中的id="app"与src目录下的App.vue中的id="app"为什么不会冲突

Vue项目结构解析
最新推荐文章于 2024-09-24 08:00:00 发布
原创 最新推荐文章于 2024-09-24 08:00:00 发布 · 1w 阅读 · 16 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue-js

本文解析了Vue项目中main.js、App.vue与index.html之间的关系，解释了如何避免ID冲突，并阐述了它们在项目中的作用。

具体描述

  • 在vue的项目开发中，我们通过vue-cli生成的项目结构中默认有index.html的文件作为默认的渲染主页文件它的外层div有id=”app”，而在项目的src目录中主组件App.vue中它的外层div也有id=”app”，两者在渲染时为什么不会冲突？

相关探讨

  • 我们先来了解一下vue项目中main.js、App.vue、index.html间的关系
    • main.js是入口文件，主要作用是初始化vue实例并使用需要的插件
    • App.vue是我们的主组件，所有的页面都是在App.vue下进行切换的；也可以认为所有的路由也是App.vue的子组件
    • index.html是vue-cli构的项目结构中默认的主渲染页面文件
  • 我们先来了解一下src/main.js中template的作用
    • 一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽
    • 下面代码中的’ template: < App/> ‘指代引入的App组件，用来取代index.html中id为app的div层及其内容，反过来说，最初el挂载的id为app的节点指的是index.html的节点而不是app.vue的，只是后来由于template而被主组件App.vue的内容所取代了而已

            import Vue from 'vue'
            import App from './App'
            import router from './router'

            Vue.config.productionTip = false

            /* eslint-disable no-new */
            new Vue({
              el: '#app',
              router,
              template: '<App/>',
              components: { App }
            })

结论

  1. index.html中的< div id=”app”>是指定绑定元素根路径的
  2. App.vue的< div id=”app”>则是用于具体注入绑定元素的内容
  3. 由于Vue组件必须有个根元素，所以App.vue里面，根元素< div id=”app”>与外层被注入框架index.html中的< div id=”app”>是一致的
  4. index.html中的#app指定绑定目标，而vue文件里的#app提供填充内容，两者在运行时指的是同一个DOM元素
vue3+vite在main.ts或者main.js文件中引入/App.vue报错（/App.vue不是模块）
XSL_HR的博客
12-26 1万+
vue3+vite在main.ts或者main.js文件中引入/App.vue报错（/App.vue不是模块）
vue笔记
yy1293516898的博客
05-26 901
Vue笔记 一、基本语法示例 <body> <div id="app"> <h1>{{msg}}</h1><!-- 用插值表达式{{}}将data中的数据显示到dom中 --> </div> <script type="text/javascript" src="js/vue.js"> </script> <script> //新建vue对象 var vm=new Vue({ el:
vue根目录下index.html中的id=“app“与src目录下的App.vue中的id=“app“的关系
atu1111的博客
09-07 3816
vue根目录下index.html中的id="app"与src目录下的App.vue中的id="app"的关系   1) index.html中的<div id="app"></div>是指定绑定元素根路径的   2) App.vue的<div id="app"></div>则是用于具体注入绑定元素的内容   3) 由于Vue组件必须有个根元素，所以App.vue里面，根元素<div id="app"></div>与外层被注入框架in
vue项目根目录下index.html中的id=“app“，与src目录下的App.vue中的id=“app“为什么不会冲突
独斟灬此夜的博客
05-01 1374
使用cli构建项目后，在根目录下有个index.html文件，其中有一行代码为： // index.html <body> <div id="app"></div> <!-- built files will be auto injected --> </body> 而src目录下的App.vue中也有id="app"的代码 // APP.vue <template> <div id="app">
vue中main.js、index.html、App.vue中的app是什么关系?
sunshineTing2的博客
07-14 1213
vue中的 main.js中app绑定的是index.html还是App.vue中？ 1.main.js是我们的入口文件，主要作用是初始化vue实例并使用需要的插件。 2.App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。所有的路由也是App.vue的子组件。 3. main.js中的#app绑定了index.html的<div id="app"></div>， 并用App.vue内容替换div标签及其内容加载 // main.js import Vue fro
vue项目根目录下index.html中的id="app"，与src目录下的App.vue中的id="app"为什么不会冲突
QC班长的博客
10-15 1万+
使用cli构建项目后，在根目录下有个index.html文件，其中有一行代码为： // index.html body> div id="app">div> body> 而src目录下的App.vue中也有id="app"的代码 // APP.vue div id="app"> h1 class="title">头部h1> router-view
为什么vue中没有div
weixin_42603332的博客
02-11 306
Vue 是一个前端 JavaScript 框架，它的核心思想是数据驱动和组件化。在 Vue 中，不存在 div 这个元素，因为它更侧重于组件的使用。你可以使用 Vue 提供的内置组件，也可以自定义组件，来构建页面结构。例如，你可以使用 "template" 标签来定义组件的模板，也可以使用 Vue 提供的 JSX 语法来定义组件。所以，在 Vue 中没有 div 不是问题，因为它仍然可以帮助你构建...
vue项目中,main.js,App.vue,index.html的调用方法
10-17
3. 创建Vue根实例，将根元素挂载到index.html中的指定元素上（通常是id为app的div）。 4. 将路由实例注册到Vue根实例中，使得路由相关的功能可用。 5. 可能还会进行一些全局插件的安装，比如Vuex、Axios等。 main....
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
10-14
本文将深入探讨Vue.js项目中三个关键文件：main.js、App.vue和page/index.vue之间的区别。 首先，让我们从项目结构说起。一个标准的Vue.js项目通常有以下部分： 1. **index.html** - 这是项目的入口文件，它通常...
Sing App Vue Dashboard .html .js 素材下载
04-20
要开始使用这个素材，你需要先确保本地已经安装了Node.js环境，然后在项目根目录下运行`npm install`或`yarn`来安装所有依赖。安装完成后，使用`npm run serve`或`yarn serve`命令启动开发服务器，你就可以在浏览器...
JavaWeb——前端工程化（3/3）：Vue项目开发流程（index.html、main.js和根组件之间的联系）
li13437542099的博客
09-24 1199
Vue 对象的定义方式和之前通过 el 指定挂载元素的方式一致，在 ES6 中，如果属性名和属性值一致，冒号后的部分可省略，直接简写为 router。main.js 是 Vue 项目的入口文件，其中引入了很多公共组件，比如 App.vue 组件，使用了关键字 import 引入模块，与 import 对应的还有 export 关键字，export 用于将对象或函数导出为模块。在 Vue 项目开发中，main.js 和首页 index.html 很少操作，主要操作的是组件文件（.vue 文件）。
总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程
夜飘凌的博客
05-14 9546
总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程 文章目录总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程1 vue中index.html、main.js、App.vue、index.js关系简介1.1 项目的运行入口index.html1.2 入口文件main.js1.3 根组件App.vue1.4 控制路由index.js2 Vue项目加载流程 1 vue中index.html
vue项目根目录下index.html中的id="app"，与src目录下的App.vue中的id="app"为什么不会冲突...
weixin_30674525的博客
05-11 384
感谢：https://blog.csdn.net/qq_35624642/article/details/78243413 index.html <body> <div id="app"></div> <!-- built files will be auto injected --> </body> ...
Vue：默认的App.vue
热门推荐
KaiSarH
11-21 2万+
Vue中默认App.vue
[Vue warn]: Cannot find element: #app
weixin_43535533的博客
05-29 4345
代码很简单，如下所示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/java...
如何生成一个APP_ID
zyjzyj2的博客
07-11 3306
1. 什么是APP_ID 开放平台使用APP_ID, 来区分openapi的调用者, 相当于用户的一个身份证 用过开放平台的开发者 懂得都懂，不懂的说了也不懂，你也别问，利益牵扯太大，说了对你们没好处，我只能说水很深，网上的资料都删了，所以我只能说懂得都懂，不懂也没办法 2. 各家的APP_ID长什么样 ● 微信的APP_ID 统一wx开头, "wx"+16位的 16进制数字 微信的APP_ID ● 支付宝的APP_ID 16位的纯数字, 可以看出开头的4位是年份, 其他数字生成规则不明 支付宝的APP
Vue框架学习（二）
qq_46087627的博客
01-10 2483
Vue实例和Vue数据绑定
Java前端Vue-2(快速入门)
weixin_45764461的博客
09-11 1241
前端开发模式的发展 静态页面 最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。 异步刷新，操作DOM 1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言，随着JavaScript的诞生，我们可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态为主。 ajax盛行：2005年开始，ajax逐渐被前端开发人员所重视，因为不用刷新页面就可以更新页面的数据和渲染效果。此时的
Vue特性
weixin_43805679的博客
04-29 407
VUE <div id="app"> {{message}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue ({ el: "#app", da...
Vue defalf axios.defaults.baseURL = process.env.VUE_APP_API_URL; Vue.prototype.$axios = axios;
最新发布
09-24
### 代码示例 在Vue项目中，将`axios.defaults.baseURL`设置为`process.env.VUE_APP_API_URL`并将`axios`挂载到Vue原型上的代码示例如下： ```javascript import axios from 'axios'; import Vue from 'vue'; // 设置axios的默认基础URL axios.defaults.baseURL = process.env.VUE_APP_API_URL; // 将axios挂载到Vue原型上 Vue.prototype.$axios = axios; ``` ### 代码作用 - **设置`axios.defaults.baseURL`**：通过将`axios`的默认基础URL设置为`process.env.VUE_APP_API_URL`，可以在发起请求时省略基础URL部分，简化请求路径的书写。例如，若`process.env.VUE_APP_API_URL`为`https://api.example.com`，则在发起请求时只需写相对路径，如`axios.get('/users')`，实际请求的URL为`https://api.example.com/users` [^4]。 - **将`axios`挂载到Vue原型上**：将`axios`挂载到Vue原型上后，在Vue组件中可以直接使用`this.$axios`来发起请求，无需在每个组件中都单独引入`axios`，提高了代码的复用性和可维护性。例如，在组件中可以这样使用： ```javascript export default { methods: { fetchData() { this.$axios.get('/data') .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); } } } ``` ### 使用场景 - **前后端分离项目**：在前后端分离的项目中，前端需要与后端API进行交互，通过设置`axios`的默认基础URL，可以方便地管理API的请求地址。同时，将`axios`挂载到Vue原型上，使组件可以更方便地发起请求，与后端进行数据交互 [^4]。 - **多环境部署**：在不同的环境（开发、测试、生产）中，后端API的基础URL可能不同。通过使用环境变量`process.env.VUE_APP_API_URL`，可以在不同环境下配置不同的基础URL，而无需修改代码。例如，在开发环境中可以将`VUE_APP_API_URL`设置为本地开发服务器的地址，在生产环境中设置为线上服务器的地址 [^4]。 ### 可能出现的问题及解决办法 - **`process.env.VUE_APP_API_URL`获取不到**：可能是因为环境变量没有正确配置。解决办法是在项目根目录下创建`.env`文件或为不同环境创建`.env.development`、`.env.production`等文件，并在文件中按照`VUE_APP_API_URL=http://your-api-url`的形式设置环境变量的值。同时，要确保环境变量的命名遵循`VUE_APP_`前缀的约定，这样Vue CLI才会将它们包含进webpack的编译过程中 [^2][^4]。 - **`axios`挂载到Vue原型上后在组件中无法使用**：可能是因为挂载代码没有在正确的位置执行。确保挂载代码在Vue实例创建之前执行，一般在项目的入口文件（如`main.js`）中进行挂载操作。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值