vue index .html渲染原理

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>hsd</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

 

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'//导入组件
import router from './router'
Vue.config.productionTip = false
new Vue({//新建vue对象
  el: '#app',//vue实例挂载作用域
  router,
  components: { App },//注册组件
  template: '<App/>'//模板,使用<App></App>代表挂载元素的内容即index.html中的<div id="app"></div>中的内容
})

App.vue

<template>
  <div id="app">
      <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

用模板<App></App>代表挂载元素的内容后,app.vue组件以及其自组件中的内容就渲染在了index.html中

 

posted @ 2018-12-03 16:12  楼下小黑嘿嘿嘿  阅读(1458)  评论(0)  编辑  收藏  举报