在代码正常运行之后，按照前面写的代码，每次修改数据显示时都要修改index.html文件，如果我们自定义了组件，也必须修改index.html来使用组件，而要避免这种频繁的修改，就可以借用el属性和template属性的关系，我们可以把index中的HTML代码放到template内，如下：
index文件：
进行打包后，template属性的内容会自动替换掉el绑定的元素。
代码抽取：
现在文件都在main.js的vue实例里面，看着乱，写起来template也不方便，首先可以定义一个组件，将vue实例template里的内容写到组件里，data，method等都写到组件里，再将组件注册到vue实例里：
（上面的data应该写成函数，写错了）注册之后我们就可以在vue实例里使用了，因为vue实例里的template属性的内容会替换el绑定的元素，所以我们把组件内容放回template里面就和原来效果一样了。
此时已经抽成一个组件，我们还可以把App组件单独写到一个js文件里再导出：
而对于app.js文件最终可以.vue文件，将app.js里的template内容放到.vue文件的template中去（加载vue文件也要使用相应loader）：
然后在main.js里引入该vue文件即可。