总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程

总结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.html
      • 1.2 入口文件main.js
      • 1.3 根组件App.vue
      • 1.4 控制路由index.js
    • 2 Vue项目加载流程

1 vue中index.html、main.js、App.vue、index.js关系

简介

项目部署完成后的项目结构以及index.html、main.js、App.vue、index.js如下图所示:

在这里插入图片描述

  1. index.html—主页,项目入口
  1. App.vue—根组件,主窗口 组件汇聚点 Vue是基于主键化开发
  1. main.js—入口文件: 整个项目工程入口 用于全局配置
  1. index.js设置路由–名字和资源映射起来

src中所有的编译打包后在public下index.html中app里面

引出我们的问题:那么这几个文件之间的联系如何呢?

1.1 项目的运行入口index.html

为什么index.html是项目的入口以及为什么index.html加载后会继续加载main.js、App.vue、index.js,以及他们之间的关系是如何联系起来的呢???

解释:

这是vue底层源码实现的,通过项目的里面webpack.dev.conf.js等配置文件,可以加载运行我们的index.html文件以及自动关联vue相关的模块。感兴趣的可以了解下。

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

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.png"><title>vue-mooc</title></head><body><noscript><strong>We're sorry but vue-mooc doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>

在网页的Title部分,加载了index.html中定义的Title,而在正文部分,加载了App.vue中定义的部分。
网页效果如下:
在这里插入图片描述

1.2 入口文件main.js

index.htmlbody体中只有一个div标签,其idapp,这个id将会连接到src/main.js内容,接着我们看一下main.js中的主要的代码`

import Vue from 'vue'
import App from './App.vue'
import router from 'router/index.js'
import store from './store/index.js'import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en' // lang i18n// set ElementUI lang to EN
Vue.use(ElementUI, { locale })// register custom base component
import Mooc from './register.js'
import 'assets/theme/index.styl'
Vue.use(Mooc)import 'assets/stylus/index.styl'Vue.config.productionTip = falsenew Vue({router,store,render: h => h(App),
}).$mount('#app')

main.js中,new一个vue实例,并手动挂载在index.html中app里面。也就是说通过main.js我们关联到App.vue组件

1.3 根组件App.vue

接着,我们继续看一下App.vue组件中的内容。

<template><div id="app" :style="getStyle"><mooc-container><mooc-header height="72px"><m-header /></mooc-header><mooc-main><router-view /></mooc-main><mooc-footer height="120px"><m-footer /></mooc-footer></mooc-container><mooc-backtop :show-height="500"></mooc-backtop><login v-if="showLogin" @maskClick="handleMaskClick" /></div>
</template><script>
import MHeader from 'components/header/index.vue'
import MFooter from 'components/footer/footer.vue'
import { mapGetters, mapMutations } from 'vuex'
import { scrollMixin } from 'assets/js/mixin.js'
export default {name: 'App',mixins: [scrollMixin],computed: {getStyle () {return {'max-height': this.showLogin ? '100%' : '','overflow': this.showLogin ? 'hidden' : ''}},// vuex...mapGetters(['showLogin'])},methods: {// 遮罩点击事件handleMaskClick () {this.setShowLogin(!this.showLogin)},// vuex...mapMutations({'setShowLogin': 'login/SET_SHOW_LOGIN'})},components: {MHeader,MFooter,Login: () => import('components/login/login.vue')}
}
</script>

App.vue中的内容是一个标准的vue模板的形式,包含了<template></template>、<script></script>、<style></style>三部分

script中直接处理好业务,template中直接渲染 ,通过v-model双向绑定,

template标签中可以看到,引入了其他页面组件,也就是我们使用npm run serve运行vue项目后看到的界面
在这里插入图片描述
问题:那么内容是从哪里渲染出来的呢?

1.4 控制路由index.js

我们注意到,<template>标签下,除了<img>标签外,还有<router-view>标签,<router-view>标签将会把路由相关内容渲染在这个地方,接下来,我们看一下路由的内容有哪些,在哪里出现的。其实,这个文件位于src/router/index.js中,我们看一下index.js中的代码

import Vue from 'vue'
import Router from 'vue-router'
import store from '../store/index.js'
import { getUserInfo } from 'utils/cache.js'
Vue.use(Router)const Home = () => import('pages/home/index.vue') // 首页路由
const CourseIndex = () => import('pages/course/index.vue') // 免费课程路由
const CourseDetail = () => import('pages/course-detail/index.vue') // 免费课程详情路由
const LessonIndex = () => import('pages/lesson/index.vue') // 实战课程路由
const LessonDetail = () => import('pages/lesson-detail/index.vue') // 实战课程详情路由
const ReadIndex = () => import('pages/read/read.vue') // 专栏路由
const ReadDetaiil = () => import('pages/read-detail/read-detail.vue') // 专栏详情路由
const UserCenter = () => import('pages/user/index.vue') // 个人中心路由
const VipCenter = () => import('pages/vip/index.vue') const UserCRUD = () => import('pages/admin/user/index')
const CourseCRUD = () => import('pages/admin/course/index')
const ArticleCRUD = () => import('pages/admin/article/index')
const CommentCRUD = () => import('pages/admin/comments/index')//路由元信息
const routes = [{path: '/crud/user',name: 'UserCRUD',    //给路由起个名,标识路由对象,可以根据name去取一个路由component:UserCRUD,meta: {requireAuth: true  //将开启你的页面路由守卫}},{path: '/crud/course',name: 'CourseCRUD',component:CourseCRUD,meta: {requireAuth: true}},{path: '/crud/article',name: 'ArticleCRUD',component:ArticleCRUD,meta: {requireAuth: true}},{path: '/crud/comments',name: 'CommentCRUD',component:CommentCRUD,meta: {requireAuth: true}},{path: '/',name: 'Index',redirect: '/home'},{path: '/home',name: 'Home',component:Home},{path: '/user',name: 'UserCenter',component:UserCenter,meta: {requireAuth: true}},{path: '/vip',name: 'VipCenter',component:VipCenter,meta: {requireAuth: true}},{path: '/course',name: 'CourseIndex',component: CourseIndex,},{path: '/course/:id',name: 'CourseDetail',component: CourseDetail,meta: {requireAuth: true}},{path: '/lesson',name: 'LessonIndex',component:LessonIndex},{path: '/lesson/:id',name: 'LessonDetail',component: LessonDetail,meta: {requireAuth: true}},{path: '/read',name: 'ReadIndex',component:ReadIndex,},{path: '/read/:id',name: 'ReadDetaiil',component:ReadDetaiil,meta: {requireAuth: true}}
]
const router = new Router({routes: routes,scrollBehavior () {return {x: 0,y: 0}}
})// 路由拦截   全局路由守卫  权限控制,前端路由守卫控制,登录才可以访问
router.beforeEach((to, from, next) => {let userinfo = getUserInfo()if (to.meta.requireAuth) {if (userinfo.username) {next()} else{store.commit('login/SET_SHOW_LOGIN', true)}} else {next()  //拿到next才放行}
})//对外输出一个router实例
export default router

index.js的代码中,建立了路由相关的内容,也就会渲染到App.vue下面的router-view中。
本项目在index.js下面配置了路由守卫,路由守卫一般应用于权限控制
路由守卫具体作用可以理解为:前端每次跳转路由,就判断 localStroage中有无token,没有就跳转到登录页面,有则跳转到对应路由页面(本项目为例)

index.js中,取其中一个例子,将UserCRUD组件发布为路由,换句说,index.js在这里就是将UserCRUD发布为路由,以在下面进行展示UserCRUD内容,接下来我们再看看components/UserCRUD中的内容是啥(由于里面的内容比较多,这里我们只截取了template中的内容)。

<template><ul class="course-list"><li v-for="(item,index) in list" :key="index" class="course-item" @click="handleCourseClick(item)"><div class="img-box"><img :src="item.img" alt=""><span v-if="item.type == 'vip'" class="vip">{{item.type}}</span><span v-else class="free">{{item.type}}</span><div v-if="item.tags && item.tags.split(',').length > 0" class="tags"><span v-for="(tag, index) in item.tags.split(',')" :key="index" class="tag-item">{{ tag }}</span></div><div v-if="item.process > 0" class="badge rate">{{ item.process }}%</div><div v-if="item.script" class="badge script">{{ item.script }}</div></div><p class="course-name">{{ item.title }}</p><p class="info"><span>{{ item.rank }}</span><span><i class="iconfont icon-user">&#xe607;</i></span><span><mooc-star class="star-box" :value="num" :disabled="true" /></span></p></li></ul>
</template>

course.vuetemplate中,我们可以看到界面上渲染的一些连接等内容。
course实际渲染效果如下:
在这里插入图片描述

到此,这个页面的加载渲染过程结束了。

2 Vue项目加载流程

通过上述过程,我们可以看到项目加载的过程是index.html->main.js->app.vue->index.js->course.vue

本项目完整代码可以进入我的码云查看:我的码云

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/482278.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ACM 杰出会员姬水旺:量子化学和物理的深度学习

整理&#xff1a;汪浩文校对&#xff1a;维克多量子技术和人工智能都是当前最先进的科学技术&#xff0c;前者被寄希望于拥有超强的计算能力&#xff0c;后者已经在各行各业“大杀四方”。当两者相遇会碰撞出什么样的火花&#xff1f;人工智能又能在哪些方面助力量子技术&#…

1 操作系统第一章 操作系统概念、功能、四大特征、操作系统发展与分类

文章目录1.1 操作系统概念1.2 操作系统功能1.3 操作系统四大特征1.3.1 并发1.3.2 共享1.3.3 并发性和共享区别及对应关系&#xff1a;1.3.4 虚拟1.3.5 异步1.4 操作系统的发展与分类1.4.1 手工操作阶段1.4.2 批处理阶段——单道批处理系统1.4.3 批处理阶段——多道批处理系统1.…

不能头脑一热,就布局颠覆性技术、上马未来产业

来源&#xff1a;财经国家周刊作者&#xff1a;曹方 何颖 姬少宇 张鹏近年来&#xff0c;布局、规划及培育人工智能与机器人、先进材料、新能源、生命科学、云计算和量子计算、混合现实等颠覆性技术、未来产业&#xff0c;成为不少地方政府推动当地产业结构调整、助力经济高质量…

2 操作系统第一章 操作系统体系结构、中断和异常、系统调用

文章目录1.1 指令概念及其分类1.2 操作系统体系结构&#xff1a;1.2.1操作系统内核概念1.3 中断和异常1.3.1 中断的诞生1.3.2 中断分类1.3.3 外中断的处理过程1.3.4 中断小结1.4 系统调用1.4.1 系统调用介绍1.4.2 系统调用功能1.4.3 系统调用小结1.1 指令概念及其分类 指令就是…

百年诺奖的那些争议与放弃

来源&#xff1a;数学与通识自1901年首届诺贝尔奖颁发以来&#xff0c;它已成为人们心中最崇高、最向往的奖项之一。可能没有人想要去拒绝它&#xff0c;因为它不仅仅是奖金的问题&#xff0c;还是莫大的荣誉和骄傲&#xff0c;其追求真理、造福社会、为人类文明创造价值的初心…

3 操作系统第二章 进程管理 进程定义、特征、组织、状态与转换

文章目录1 进程的定义和特征2 进程的组织3 进程的状态与转换3.1 进程的状态3.2 进程状态转换1 进程的定义和特征 引入进程的原因 为了使程序能够并发执行&#xff0c;并且可以对并发执行的程序加以描述和控制 进程定义 进程是进程实体的运行过程&#xff0c;是系统进行资源分配…

数学家、中科院院士张景中:数学实力影响国家实力是近代以来的共识

本文转自&#xff1a;长江日报-长江网转载自公众号 和乐数学长江日报-长江网讯(记者周劼)最近一段时间&#xff0c;关于“数学”的热点新闻接连不断&#xff0c;从华为爆料有700名数学家&#xff0c;到中国重夺国际奥数冠军&#xff0c;从丘成桐区别数学家和数学工程师&#xf…

4 操作系统第二章 进程管理 进程控制、通信

文章目录1 进程控制1.1 进程控制1.2 进程控制实现1.3 进程创建1.4 进程终止1.5 进程阻塞与唤醒1.6 进程切换1.7 进程控制小结2 进程通信2.1 共享通信2.2 管道通信2.3 消息传递2.4 进程通信小结1 进程控制 1.1 进程控制 进程控制的主要功能是对系统中的所有进程实施有效的管理&…

《Science》日本科学家利用干细胞诱导成功了大鼠生殖细胞

来源&#xff1a;生物通日本科学家利用干细胞来诱导生殖细胞&#xff0c;从而产生健康且可生育的后代。不久前&#xff0c;日本京都大学(Kyoto University)的研究人员在《细胞干细胞》(Cell Stem Cell)杂志上发表了一篇研究论文&#xff0c;称他们利用小鼠多能干细胞在试管中逐…

5 操作系统第二章 进程管理 线程介绍

文章目录1 什么是线程1.1 为什么要引入线程&#xff1a;1.2 线程定义1.3 线程与进程的比较1.4 线程的属性1.5 线程实现方式1.5.1 用户级线程&#xff08;ULT&#xff09;1.5.2 内核级线程&#xff08;KLT,又称“内核支持的线程”&#xff09;1.5.2 用户级线程、内核级线程二者组…

6 操作系统第二章 进程管理 处理机调度

文章目录1 处理机调度1.1 处理机调度概念1.2 处理机调度三大层次1.3 处理机三层调度的联系、对比1.4 处理机调度小结2 进程调度2.1 进程调度、进程切换时机2.2 进程调度方式2.3 进程的切换与过程2.4 进程切换与调度小结3 典型的调度算法3.1 先来先服务 FCFS3.2 短作业优先 SJF3…

如何通向“广义人工智能”?LSTM 提出者之一Sepp Hochreiter:将符号 AI 与神经 AI 相结合...

来源&#xff1a;AI科技评论作者&#xff1a;Sepp Hochreiter解读&#xff1a;Antonio编辑&#xff1a;陈彩娴人类包含意识、认知、决策等等在内的智慧能力&#xff0c;似乎从人类有记录的那一刻起&#xff0c;就吸引着无数哲学家的思索。与之类似&#xff0c;从AI诞生的那一刻…

德勤预判:2022技术七大趋势

来源&#xff1a;综合德勤公开平台公开发布信息整理编辑&#xff1a;邱峰、罗兵&#xff0c;张钦煜审核&#xff1a;张祥、吴斌、数字理政研究院、中通协大数据分会1、数据跨界共享更便捷&#xff1a;诸多新技术致力于在保护隐私的同时&#xff0c;简化组织内和组织间的数据共享…

7 操作系统第二章 进程管理 进程同步与互斥

文章目录1 进程同步与互斥1.1 进程同步1.2 进程互斥1.3 进程同步机制遵循的原则1.3 进程同步、互斥小结2 进程互斥实现方法2.1 互斥的软件实现方法2.1.1 单标志法2.1.2 双标志法先检查2.1.3 双标志法后检查2.1.4 Peterson算法2.1.5 互斥的软件实现方法小结2.2 互斥的硬件实现方…

8 操作系统第二章 进程管理 信号量 PV操作 用信号量机制实现 进程互斥、同 步、前驱关系

文章目录1 信号量机制1.1 整形信号量1.2 记录形信号量1.3 信号量机制小结2 用信号量机制实现进程互斥、同 步、前驱关系2.1 信号量机制实现进程互斥2.2 信号量机制实现进程同步2.3 信号量机制实现前驱关系2.4 信号量机制实现进程互斥、同 步、前驱关系小结1 信号量机制 用户进程…

一文掌握深度学习、神经网络和学习过程的历史

来源&#xff1a;算法与数学之美本质上&#xff0c;深度学习是一个新兴的时髦名称&#xff0c;衍生于一个已经存在了相当长一段时间的主题——神经网络。从20世纪40年代开始&#xff0c;深度学习发展迅速&#xff0c;直到现在。该领域取得了巨大的成功&#xff0c;深度学习广泛…

2022年后人工智能/深度学习八大应用方向

来源&#xff1a;电子工程专辑 人工智能、机器学习、深度学习已经成为当下最热门的前端科技之一。这三者其实是子-子集的关系。随着技术发展和应用的深入&#xff0c;深度学习越来越重要&#xff0c;成为AI的金字塔。本文总结了人工智能领域在2022年及以后数年内最热门的八大应…

多生产者-多消费者问题

文章目录1 问题描述2 问题分析3 代码实现4 分析总结1 问题描述 桌子上有一只盘子&#xff0c;每次只能向其中放入一个水果。爸爸专向盘子中放苹果&#xff0c;妈妈专向盘子中放橘子&#xff0c;儿子专等着吃盘子中的橘子&#xff0c;女儿专等着吃盘子中的苹果。只有盘子空时&am…

​Nat. Commun.速递:深度学习在计算生物学中的应用综述

来源&#xff1a;集智俱乐部作者&#xff1a;郭瑞东 审校&#xff1a;梁金 编辑&#xff1a;邓一雪摘要蛋白质结构预测是计算生物学中一个长达半个世纪的重大挑战&#xff0c;最近&#xff0c;深度学习在这方面取得了前所未有的进展。4月1日&#xff0c;一项发表在 Nature Comm…

吸烟者问题

文章目录1 问题描述2 问题分析3 代码实现&#xff1a;1 问题描述 假设一个系统有三个抽烟者进程和一个供应者进程。每个抽烟者不停地卷烟并抽掉它&#xff0c;但是要卷起并抽掉一支烟&#xff0c;抽烟者需要有三种材料&#xff1a;烟草、纸和胶水。三个抽烟者中&#xff0c;第一…