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

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

2017-03-02 16:12

访问量: 2975

分类：

技术

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

其中

module.exports = {

entry : {

app: './src/app.js' // 这里就定义了vue的入口文件

}

}

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

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

这里的  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 中的

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

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

所有的 中的内容，都会被自动替换。