index.html

项目的运行入口，在body体中只有一个 div 标签，其 id 为 app，这个 id 将会连接到 src/main.js 内容。
在浏览器打开的瞬间，浏览器中正文部分会瞬间显示index.html 中定义的正文部分。上面有一个 id 为 app 的挂载点，之后我们的 Vue 根实例就会挂载到该挂载点上

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>y</title>
  </head>
  <body>
    <div id="app">test</div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js

入口文件，主要作用是初始化vue实例，并引入所需要的插件。新建了一个 vue 实例，并使用 el：#app 链接到 index.html 中的 app，并使用 template 引入组件和路由相关的内容，也就是说通过 main.js 我们关联到 App.vue 组件

1
2
3
4
5
6
7
8
9
10
11
12
13
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

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

App.vue

主组件，所有页面都是在 App.vue 下进行切换的。可以理解为所有的路由 router，也是 App.vue 的子组件。

1
2
3
4
5
6
7
8
9
10
11
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

Index.js

标签下，有标签，标签将会把路由相关内容渲染在这个地方，路由中文件位于src/router/index.js 中。在 index.js 的代码中，建立了路由相关的内容，也就会渲染到 app.vue 下面的中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

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

项目加载的过程是 index.tml → main.js → app.vue → index.js → helloworld.vue。

本文摘编自wflynn的博客，遵循CC BY-SA版权协议。