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中