如果我们希望将data中的数据显示在界面中，就必须是修改index.html,如果我们后面自定义了组件，也必须修改index.html来使用组件,但是html模板在之后的开发中，并不希望手动的来频繁修改.
定义template属性：
在前面的Vue实例中，我们定义了el属性，用于和index.html中的#app进行绑定，让Vue实例之后可以管理它其中的内容，我们吧index,html中的代码删至:
我们可以在VUE实例中 定义一个template属性，代码如下：
那么 重新打包，运行程序，显示一样的结果和HTML代码结构。。。 那么证明 temllate中的代码会替代 index.html中文件的 id为app的版块。
el和template模板的关系是什么：
el用于指定Vue要管理的DOM，可以帮助解析其中的指令、事件监听等等；
如果Vue实例中同时指定了template，那么template模板的内容会替换掉挂载的对应el的模板。
这样做目的：
之后我们就不需要在以后的开发中再次操作index.html，只需要在template中写入对应的标签即可
书写template模块非常麻烦怎么办：
我们会将template模板中的内容进行抽离
分成三部分书写：template、script、style，结构变得非常清晰。
例如：
【图1】抽取Template代码；； 然后在Vue实例 用 Components 属性哪里 注册一下APP即可【图2】
例2：
简单就用 Default 这样实现JS文件独立，那么就可以导入、导出了，，，
光JS不够，CSS、JAVASCRIPT呢？ 那就新建VUE文件：
可以看到 一新建他就有这三的模板给你了 你在其中些代码即可【上面那个是HbuiderX 给出的】
【下面这个是 WEBStore给出的 】
叫：
模板是这样的 可以看出用Default 所以呢 这就是上面JS实现分离的技巧所在：
至于 style 的 scoped 自己百度：