使用webstorm创建一个vue.js的工程，创建完毕后，最后点击运行。会展示如下图所示的页面，表示vue的工程运行成功。
但是看到demo的代码的时候，发现跟网上教程(Runoob)的介绍有些不一样。主要难以理解的是在main.js文件里面。如下图，红框的components和template跟教程介绍的写法不一样。推算这个应该是高级表现手法。下面我就来用实验的方式，将红框的内容还原成正常的写法。
首先，el: '#app'这个的意思是，vue对象将html中的id=app的div绑定过来。比较难理解的就是components和template。两个整合成如下规范的形式见图。
这时浏览器会发现图片显示不了，如下
图片显示不了的问题可能是图片必须在static下才能访问。将图片拷贝过去，路径修改assets为static就好了。至于图片为什么没有显示在中央，是因为没有应用css的缘故(在app.vue里是有css的，所以默认的demo图片是居中的)。现在再将router加进来。见下图代码。
这时浏览器访问的页面和demo的就基本一致了，除了 css。效果如下图：
有了以上的实验，可以等效的知道demo的那个components和template的意义所在。下面再将demo改写成标准的形式如下图。值得注意的是。即使在index.html的<div></div>中追加<App1></App1>页面也没有任何变化。这是为什么呢？原因应该出在以App.vue为模板的话，会默认将模板html贴到index.html的绑定的<div>里面，且只能贴一份。
