总结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如下图所示:
- index.html—主页,项目入口
- App.vue—根组件,主窗口 组件汇聚点 Vue是基于主键化开发
- main.js—入口文件: 整个项目工程入口 用于全局配置
- 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.html
的body
体中只有一个div
标签,其id
为app
,这个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"></i></span><span><mooc-star class="star-box" :value="num" :disabled="true" /></span></p></li></ul>
</template>
在course.vue
的template
中,我们可以看到界面上渲染的一些连接等内容。
course实际渲染效果如下:
到此,这个页面的加载渲染过程结束了。
2 Vue项目加载流程
通过上述过程,我们可以看到项目加载的过程是index.html->main.js->app.vue->index.js->course.vue。
本项目完整代码可以进入我的码云查看:我的码云
总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程相关推荐
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
- 在vue中使用海康插件实现视频监控,视频直播方法一(RTMP流加Flash加videoJS)
在vue中使用海康插件实现视频监控,视频直播方法一(RTMP流加Flash加videoJS) 第一步 用npm装这个几个包 "video.js": "^6.6.0&quo ...
- 【前端2】js:原始类型,运算符,调试,页面加载,轮播图,Bom(对象,时钟),Dom(全选全不选,省市级联,隔行/触摸换色,表单校验)
文章目录 1.js两种引入:js最终要引入到html在浏览器中运行 2.js五大原始类型:undefined 3.js的运算符和流程控制:js不支持单&和单|性能低 4.案例_99乘法表:So ...
- vue 项目加载顺序_如何提高Vue项目首页的加载速度
为何当一个VUE项目过大时,打包之后初次访问首页加载速度会异常的缓慢,是什么原因导致以及如何解决这些问题? 首页打开速度慢的原因 其实浏览器加载一个页面的过程就是通过http协议从服务器端下载项目所需 ...
- Vue项目加载过慢优化研究
近日研究了一下公司vue项目加载过慢问题,首次打开速度要15秒,经过研究,从两方面着手,最终使项目速度降到了3秒 一.通过过gzip加载 参考文章: 一.webpack优化之Gzip(vue) - 简 ...
- 魔方APP项目-02-服务端项目搭建,创建manage.py文件、构建全局初始化函数创建app应用对象、通过终端脚本启动项目、项目加载配置、数据库初始化、日志初始化、蓝图初始化
服务端项目搭建 新建项目目录mofangapi,并创建虚拟环境 mkvirtualenv mofang 安装开发中使用的依赖模块 pip install flask==0.12.4 pip insta ...
- android中常用的下拉刷新加载更多_如何设计“加载流程”
为什么要处理"加载"状态 在页面拉取数据.或提交某些数据时,需要一定的时间来等待服务端返回结果.如果不处理加载,用户可能会看到一片空白,以为你的软件出错:或者因没有建立心理预期,被 ...
- html下拉加载原理,GitHub - gavinjzx/wxPull: 原生JS实现微信公众号或网页使用下拉加载和上拉刷新...
原生JS实现微信公众号或网页使用下拉加载和上拉刷新 微信浏览器打开网页显示网址安全信息解决办法,网上很多办法,也找了很久,但是最新的很多用不了. 先看看效果,是不是亲想要的,可以跳过,以免浪费宝贵时间 ...
- html下拉加载实现原理,GitHub - sybiele/wxPull: 原生JS实现微信公众号或网页使用下拉加载和上拉刷新...
原生JS实现微信公众号或网页使用下拉加载和上拉刷新 微信浏览器打开网页显示网址安全信息解决办法,网上很多办法,也找了很久,但是最新的很多用不了. 先看看效果,是不是亲想要的,可以跳过,以免浪费宝贵时间 ...
最新文章
- Nutanix企业云助力广播传媒的融合媒体发展之路
- 前台提交数据到php mysql,建立一个基础的MySQL数据库,使用PHP来抓取和处理数据,并抛出给前台...
- 掌握 React 与 React Native
- 如何停止运行在服务器的项目,怎么启动和停止服务器
- 3. PowerShell --基本操作,Alias,输出
- (计算机显示器主屏幕区域)桌面造句,部编版《语文园地四》教学反思模板(11页)-原创力文档...
- 矩阵分解SVD在推荐系统中的应用
- 更轻松的获取APK文件安装时间
- 编译原理第三章词法分析知识点思维导图版
- java基础编程题书籍
- DB2入门(5)——DB2配置文件
- Cesium:加载OSGB倾斜摄影三维模型
- 通俗理解电磁干扰及共模电感的原理
- 搭建微信订阅号后台服务
- 网卡82546驱动linux,Linux e1000e网卡驱动
- 完美的Python代码制作“恐龙跳一跳“小游戏【附带源码 】
- jQuery基础文档(持续更新)
- Linux--系统网络测试和测试工具
- 信息学奥赛C++语言:蛋糕
- HTML5期末大作业:个人介绍/个人主页/网页设计——个人博客 (11页) HTML+CSS+JavaScript
热门文章
- 干,认识Audio框架还因此发现一个雷
- SecureCRT 用来当串口工具的设置
- 分布式系统服务器要求,浅谈分布式系统
- android v4包自动导入吧,android如何导入v4包的源码
- mysql访问类型最好的_【干货满满】最全的MySQL性能指南(一):选择最佳的数据类型...
- LeetCode 963. 最小面积矩形 II
- LeetCode 898. 子数组按位或操作(前缀和思想)
- LeetCode 893. 特殊等价字符串组
- 剑指Offer - 面试题9. 用两个栈实现队列
- LeetCode 475. 供暖器(双指针二分查找)