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

访问量: 482

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>中的内容,都会被自动替换。 

<script>中的代码则是脚本代码。 至此,整个过程就出来了。

订阅/RSS Feed

Subscribe

分类/category