第一步：是将vue挂载到index.js中的id为app的dom中
main.js:
import Vue from 'vue'; new Vue({ el: "#app", })
index.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href=""> </head> <body> <div id="app"> </div> </body> </html>
（一般这个文件不再改变）
第二步：是了解一个编译规则，tremplate中的内容会替换el中dom的所有东西
import Vue from 'vue'; new Vue({ el: "#app", template:`<div>我是template,我会替换你</div>`, })
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href=" ">
</head>
<body>
<div id="app"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>
第三步：在外部编写一个组件，在Vue实例中注册一个子组件，使用到template中
import Vue from 'vue'; const App ={ template:`<div><h1>{{message}}</h1></div>`, data(){ return{ message:'我是template,我会替换你' } } } new Vue({ el: "#app", template:"<App/>", components:{ App } })
