浅谈vue中index.html、main.js、App.vue、index.js之前的关系以及加载过程

最新推荐文章于 2024-06-04 09:27:58 发布
最新推荐文章于 2024-06-04 09:27:58 发布
阅读量1.3k 收藏 4
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/djrm11/article/details/106195449
版权
前端 专栏收录该内容
58 篇文章 46 订阅 ¥9.90 ¥99.00
订阅专栏

前序
承接上一遍“通过webpack构建vue项目”构建的项目文件，简单阐述一下当我们构建完成后，vue项目中的index.html、main.js、App.vue、index.js的运行加载过程，以及首界面是如何出现的，逐步了解vue项目，针对刚开始接触vue，不知道vue项目如何加载的小白，大神请绕过。

简介
项目部署完成后的项目结构以及解释如下图所示

项目运行
项目的运行入口index.html

 为什么index.html是项目的入口以及为什么index.html加载后会继续加载main.js、App.vue、index.js，以及他们之间的关系是如何联系起来的呢，这块的配置文件位于build文件夹下，包括webpack.dev.conf.js等，感兴趣的可以了解下。通过项目的配置文件，可以加载运行我们的index.html文件以及自动关联vue相关的模块。

首先我们来看一下index.html中的内容

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    &
了解本专栏 订阅专栏 解锁全文
hello_world!
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
vue项目中,main.js,App.vue,index.html的调用方法
10-17
今天小编就为大家分享一篇vue项目中,main.js,App.vue,index.html的调用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
1，vue页面加载过程（index.html,main,App.vue的关系）
木卯彳亍的博客
10-20 5455
vue页面加载过程（index.html,main,App.vue的关系） （1） index.html的body体内只有一个div标签<div id="app"></div>，其id为app， 通过这个id连接到main.js的内容 （2） 在main.js中新建了一个vue实例，vue通过js渲染dom结构，在vue构造函数时，需要配置一个el属性，如果没有el属性时，可以用.$mount(’#app’)进行挂载。这里面的 render: h => h(App)
uniapp app.vue加载完成后运行首页
wzy_cs的博客
07-06 2712
1.main.js Vue.prototype.$onLaunched = new Promise(resolve => { Vue.prototype.$isResolve = resolve; }) 2.app.vue的onLaunch this.$isResolve() 3.首页onLoad async onLoad(options) { await this.$onLaunched; },
vue3 项目目录使用文件夹和index.vue，与直接用直接用名字.vue的区别
最新发布
于坤
06-04 605
选择文件夹加index.vue还是直接用名字命名.vue文件，取决于项目的规模和复杂度。对于大型项目和复杂组件，推荐使用文件夹结构以保持代码的模块化和可维护性。对于小型项目和简单组件，直接使用名字命名.vue文件可以简化目录结构，加快开发速度。
vue element-ui Loading加载事件的使用以及自定义Loading加载动画
snrt_Aurora的博客
12-21 7925
怎么使用 Loading 加载事件
浅谈vue中index.html、main.js、App.vue、index.js之间的关系以及加载过程
learnjavawell的博客
02-27 746
本文简单阐述基于webpack构建的vue项目，当构建完成后，vue项目中的index.html、main.js、App.vue、index.js的运行加载过程，以及首页是如何出现的，逐步去了解vue项目。 项目构建完成后的项目结构以及解释如下图所示： 项目运行 项目的运行入口index.html 为什么index.html是项目的入口以及为什么index.html加载后会继续加载main.js、...
Vue中index.html、main.js、App.vue，之间关系
JavaAndLI的博客
09-15 2691
使用Vue 提供的官方的 CLI和构建工具webpack生成的vue项目，对于其中的main.js，App.vue，index.html这三文件之前的关系不是很明确，现在记录如下
详谈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** - 这是项目的入口文件，它通常...
package.json中main，module，exports三种方式的使用，自定义入口文件index.js
05-07
对于Vue.js项目，尤其是由`@vue/cli`生成的Vue3项目，`package.json`中的`main`、`module`和`exports`字段用于指定不同环境下的入口文件，这有助于优化加载和打包过程。本文将深入探讨这三种方式的使用以及如何...
vue项目main.js使用方法
01-21
在main.js文件中定义了一个vue对象,其中el为实例提供挂载元素 //基础设置 import Vue from ‘vue' //引入路由和vuex import router from './router' import store from './store/store’ import App from './App' //...
关于index.html app.vue main.js index.js这些事
zy_leslie的博客
07-16 1092
一、项目运行入口index.html 1、为什么index.html是项目的入口？ 2、为什么index.html加载后会继续加载main.js、App.vue、index.js？ 3、他们之间的关系是如何联系起来的？ ...... 回答：这块的配置文件位于文件夹下，包括webpack.dev.conf.js。通过项目的配置文件，可以加载运行我们的index.html文件以及自动关联vue...
vue动态加载外部依赖js代码实现
11-19
本文档把js加载做成vue组件，便于在其他模块引用，符合vue整体思路，供大家参考借鉴
Vue项目入口文件main.js和App.vue和index.html之间的关系
FurtherSkyQ的博客
04-08 9007
刚开始接触Vue，说实话对Vue的运行逻辑其实不是很清楚，更多的是比较模糊，今天就先记录下Vue项目在初始化时做了做了什么。 1、在初始化的Vue项目中，我们最先接触到的就是main.js，App.vue，index.html这三个文件： index.html---主页，项目入口 App.vue---根组件 main.js---入口文件 那么这几个文件之间的联系如何呢？ 1.先看index.html中的内容：（为了很好的标识各个文件，我对各文件进行了文字标记） 2.在App.vu.
Vue项目开发目录结构和引用调用关系
凉城玖的博客
08-12 919
下图为Vue项目文件夹： 以下就项目文件夹中的各文件的作用进行介绍： ├── build/ # Webpack 配置目录 ├── dist/ # build 生成的生产环境下的项目 ├── config/ # Vue基本配置文件，可以设置监听端口，打包输出等 ├── node_modules/ # 依赖包，通常执行npm i会生成 ├── src/ # 源码目
vue项目中，main.js,App.vue,index.html如何调用
热门推荐
每天多一点干货
10-31 1万+
1、main.js是我们的入口文件，主要作用是初始化vue实例，并引入所需要的插件 2、App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。 index.html文件入口 src放置组件和入口文件 node_modules为依赖的模块
二、Vue项目中index.html，App.vue，main.js，index.js，helloWord.vue联系
MaxineZhou的博客
09-08 847
index.html加载main.js，main.js加载App.vue，App.vue加载路由文件index.js，index.js加载当前根目录的路由对应的存储在component目录里的组件HelloWord.vue。 index.html是项目入口，通过<div id="app"><div>将main.js中的实例app挂载到了这里 main.js作为项目的入口文件，在main.js里新建了一个Vue实例挂载在id=app的div元素上 知识点： 1.实例化.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

hello_world!

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

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

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

打赏作者

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

抵扣说明：

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

余额充值