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中