mian.js
import Vue from 'vue' import App11 from './App' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app2', //对应index.html的id，<div id="app2"></div> template: '<App11/>', //import App11 from './App' , components: { App11 } , template: '<App11/>' ： 3个一样。 components: { App11 } })
App.vue
<template> <div id="aaa"> <!-- 这个id没有，用于写样式 --> <img src="./assets/logo.png"> <hello></hello> </div> </template> <script> import Hello from './components/Hello' export default { components: { Hello } } </script> <style> #aaa { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
index,html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>t1</title> </head> <body> <div id="app2"></div> <!-- new Vue({ el: '#app2' }) --> </body> </html>