总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程
總結(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如下圖所示:
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><!-- built files will be auto injected --></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í)際渲染效果如下:
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)題。
- 上一篇: 国科大prml10-无监督学习
- 下一篇: Vue封装下拉框组件时,为documen