Back

vue 打开页面的过程（从启动到加载所有页面）

发布时间: 2017-03-02 08:12:00

1. 最初的最初，我们要知道 ./build/webpack.base.conf.js 这个文件，是webpack打包的主要配置文件

其中

module.exports = {
  entry : {
    app: './src/app.js'   // 这里就定义了vue的入口文件
  }
}

知道了这个打包文件，我们就可以知道接下来的事儿了。

2. 找到index.html ，可以看到它的内容如下；

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

这里的 id='app', 就是将来会动态变化的内容。特别类似于 rails的 layout. 只不过这个layout是第一层layout(最大的layout)

3. 回到 src/app.js ，可以看到它的内容如下；

import Vue from 'vue'
import App from './App.vue'

const app = new Vue(Vue.util.extend({ router }, app))
app.$mount('#app')

熟悉 jquery, css selector的同学可以看到， #app 就是 index.html 中的 <div id= app>

4. 注意上面的 App.vue, 它会被 app.js 加载， App.vue的内容如下：


<template>
  <div id="app">
    <transition name="fade" mode="out-in">
      <router-view class="view"></router-view>
    </transition>
  </div>
</template>
<script>

</script>
<style>
</style>

注意上面的 template, 这个就是第二层 layout，可以看到，里面还有个 div id = 'app', 这个元素跟 index.html中的是同一个元素（暂且这么理解）

所有的 <router-view>中的内容，都会被自动替换。

Back