Vue程序启动过程

最新推荐文章于 2025-05-23 18:08:34 发布

原创最新推荐文章于 2025-05-23 18:08:34 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #启动过程

Vue学习专栏收录该内容

3 篇文章

订阅专栏

本人小白，只是记录下学习的体会供自己日后参考，如果能帮到你一点点，万分欣慰。

代码结构如下图：

其运行过程如图中的编号顺序，index.html是整个程序的入口。代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<title>test</title>

</head>

<body>

<div id="app"></div>

<!-- built files will be auto injected -->

</body>

</html>

入口index.html代码中<div id="app"></div>中的app是这个文件的核心，index.html执行后，会调用main.js，但是为什么会调用main.js我也不知道，应该是在某个配置文件中，比如：webpack.base.conf.js文件下的app: ['babel-polyfill', './src/main.js']，不过当我把这地方改名后，出现了错误。不过这些不用管，我只是想知道是从哪里调用main.js的。

main.js文件代码如下：

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

el: '#app'中的app与index.html中的 id="app"对应。同时该文件通过 components: { App }和template: '<App/>'指引程序找到一下个要执行的文件App.vue，同时加载了router路由和store。

在App.vue中

<template>
  <div id="apptest">
    <router-view />
  </div>
</template>

<script>
export default {
  created () {
   ///初始化项目业务配置数据，保存到store中
 this.$store.commit('setBaseConfig',baseConfig)
  }
}
</script>

<style>
html,
body,
#apptest {
  padding: 0;
  margin: 0;
  height: 100%;
}
</style>

其中最最重要的是：<router-view />用来在后面的路由中挂载不同的页面。

程序执行至此则主窗体还未启动起来。因为我的App.vue里什么页面都没有，只有router-view这个节点。但是还记得main.js用了router吗？，是的，这个会指引程序找到router下面的index.js。

index.js代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/views/index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    }
  ]
})

代码的

routes: [
{
path: '/',
name: 'Index',
component: Index
}
]这里配置的主界面为views/index.vue组件： Index from '@/views/index。于是：http://localhost:8080/#/这个主页面就指向了views/index.vue。至此，主页面就加载上来了。