當(dāng)前位置：首頁(yè) > 前端技术 > vue >内容正文

vue

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

發(fā)布時(shí)間：2024/7/5 vue 43 豆豆

生活随笔收集整理的這篇文章主要介紹了总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

總結(jié)Vue中index.html、main.js、App.vue、index.js之間關(guān)系以及Vue項(xiàng)目加載流程

文章目錄

總結(jié)Vue中index.html、main.js、App.vue、index.js之間關(guān)系以及Vue項(xiàng)目加載流程
- 1 vue中index.html、main.js、App.vue、index.js關(guān)系
- - 簡(jiǎn)介
  - 1.1 項(xiàng)目的運(yùn)行入口index.html
  - 1.2 入口文件main.js
  - 1.3 根組件App.vue
  - 1.4 控制路由index.js
- 2 Vue項(xiàng)目加載流程

1 vue中index.html、main.js、App.vue、index.js關(guān)系

簡(jiǎn)介

項(xiàng)目部署完成后的項(xiàng)目結(jié)構(gòu)以及index.html、main.js、App.vue、index.js如下圖所示：

index.html—主頁(yè)，項(xiàng)目入口

App.vue—根組件，主窗口組件匯聚點(diǎn) Vue是基于主鍵化開(kāi)發(fā)

main.js—入口文件：整個(gè)項(xiàng)目工程入口用于全局配置

index.js設(shè)置路由–名字和資源映射起來(lái)

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

引出我們的問(wèn)題：那么這幾個(gè)文件之間的聯(lián)系如何呢？

1.1 項(xiàng)目的運(yùn)行入口index.html

為什么index.html是項(xiàng)目的入口以及為什么index.html加載后會(huì)繼續(xù)加載main.js、App.vue、index.js，以及他們之間的關(guān)系是如何聯(lián)系起來(lái)的呢？？？

解釋：

這是vue底層源碼實(shí)現(xiàn)的，通過(guò)項(xiàng)目的里面webpack.dev.conf.js等配置文件，可以加載運(yùn)行我們的index.html文件以及自動(dòng)關(guān)聯(lián)vue相關(guān)的模塊。感興趣的可以了解下。

首先我們來(lái)看一下index.html中的內(nèi)容

<!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></body> </html>

在網(wǎng)頁(yè)的Title部分，加載了index.html中定義的Title，而在正文部分，加載了App.vue中定義的部分。
網(wǎng)頁(yè)效果如下：

1.2 入口文件main.js

在index.html的body體中只有一個(gè)div標(biāo)簽，其id為app,這個(gè)id將會(huì)連接到src/main.js內(nèi)容，接著我們看一下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一個(gè)vue實(shí)例，并手動(dòng)掛載在index.html中app里面。也就是說(shuō)通過(guò)main.js我們關(guān)聯(lián)到App.vue組件

1.3 根組件App.vue

接著，我們繼續(xù)看一下App.vue組件中的內(nèi)容。

<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: {// 遮罩點(diǎn)擊事件handleMaskClick () {this.setShowLogin(!this.showLogin)},// vuex...mapMutations({'setShowLogin': 'login/SET_SHOW_LOGIN'})},components: {MHeader,MFooter,Login: () => import('components/login/login.vue')} } </script>

App.vue中的內(nèi)容是一個(gè)標(biāo)準(zhǔn)的vue模板的形式，包含了<template></template>、<script></script>、<style></style>三部分

script中直接處理好業(yè)務(wù)，template中直接渲染，通過(guò)v-model雙向綁定，

從template標(biāo)簽中可以看到，引入了其他頁(yè)面組件，也就是我們使用npm run serve運(yùn)行vue項(xiàng)目后看到的界面

問(wèn)題：那么內(nèi)容是從哪里渲染出來(lái)的呢？

1.4 控制路由index.js

我們注意到，<template>標(biāo)簽下，除了<img>標(biāo)簽外，還有<router-view>標(biāo)簽，<router-view>標(biāo)簽將會(huì)把路由相關(guān)內(nèi)容渲染在這個(gè)地方，接下來(lái)，我們看一下路由的內(nèi)容有哪些，在哪里出現(xiàn)的。其實(shí)，這個(gè)文件位于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') // 首頁(yè)路由 const CourseIndex = () => import('pages/course/index.vue') // 免費(fèi)課程路由 const CourseDetail = () => import('pages/course-detail/index.vue') // 免費(fèi)課程詳情路由 const LessonIndex = () => import('pages/lesson/index.vue') // 實(shí)戰(zhàn)課程路由 const LessonDetail = () => import('pages/lesson-detail/index.vue') // 實(shí)戰(zhàn)課程詳情路由 const ReadIndex = () => import('pages/read/read.vue') // 專(zhuān)欄路由 const ReadDetaiil = () => import('pages/read-detail/read-detail.vue') // 專(zhuān)欄詳情路由 const UserCenter = () => import('pages/user/index.vue') // 個(gè)人中心路由 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', //給路由起個(gè)名，標(biāo)識(shí)路由對(duì)象，可以根據(jù)name去取一個(gè)路由component:UserCRUD,meta: {requireAuth: true //將開(kāi)啟你的頁(yè)面路由守衛(wèi)}},{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}} })// 路由攔截全局路由守衛(wèi) 權(quán)限控制，前端路由守衛(wèi)控制，登錄才可以訪問(wèn) 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才放行} })//對(duì)外輸出一個(gè)router實(shí)例 export default router

在index.js的代碼中，建立了路由相關(guān)的內(nèi)容，也就會(huì)渲染到App.vue下面的router-view中。
本項(xiàng)目在index.js下面配置了路由守衛(wèi)，路由守衛(wèi)一般應(yīng)用于權(quán)限控制
路由守衛(wèi)具體作用可以理解為：前端每次跳轉(zhuǎn)路由，就判斷 localStroage中有無(wú)token，沒(méi)有就跳轉(zhuǎn)到登錄頁(yè)面，有則跳轉(zhuǎn)到對(duì)應(yīng)路由頁(yè)面（本項(xiàng)目為例）

在index.js中，取其中一個(gè)例子，將UserCRUD組件發(fā)布為路由，換句說(shuō)，index.js在這里就是將UserCRUD發(fā)布為路由，以在下面進(jìn)行展示UserCRUD內(nèi)容，接下來(lái)我們?cè)倏纯碿omponents/UserCRUD中的內(nèi)容是啥(由于里面的內(nèi)容比較多，這里我們只截取了template中的內(nèi)容)。

<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中，我們可以看到界面上渲染的一些連接等內(nèi)容。
course實(shí)際渲染效果如下：

到此，這個(gè)頁(yè)面的加載渲染過(guò)程結(jié)束了。

2 Vue項(xiàng)目加載流程

通過(guò)上述過(guò)程，我們可以看到項(xiàng)目加載的過(guò)程是index.html->main.js->app.vue->index.js->course.vue。

本項(xiàng)目完整代碼可以進(jìn)入我的碼云查看：我的碼云

總結(jié)

以上是生活随笔為你收集整理的总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：国科大prml10-无监督学习
下一篇： Vue封装下拉框组件时，为documen