[Vue warn]: Do not use built-in

[Vue warn]: Do not use built-in or reserved HTML elements as component id: main

使用vue时出现这样的报错，原因是你使用的组件名"main"跟系统（vue）的内置属性名冲突了，所以创建失败，最好的方法就是换个名字。

vue的命名限制

vue中的模板，需要插入到DOM中，所以模板中的标签名必须能够被 DOM 正确地解析。主要有三种情况：

• 一，完全不合法的标签名，例如 </>
• 二，与 HTML 元素重名会产生不确定的行为，例如使用 input 做组件名不会解析到自定义组件，使用 button 在 Chrome 上正常但在 IE 上不正常
• 三，与 Vue 保留的 slot、partial、component 重名，因为会优先以本身的意义解析，从而产生非预期的结果

命名限制存在的根本原因是：模板解析的过程依赖了 DOM。在vue 2.0中主要改进的地方就是将模板解析过程使用Virtual DOM 实现，这样就使得组件命名更加灵活。

以下为vue 2.0中HTML 标签和 Vue 保留标签的范围

// 区分大小写
var isHTMLTag = makeMap(
  'html,body,base,head,link,meta,style,title,' +
  'address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,' +
  'div,dd,dl,dt,figcaption,figure,hr,img,li,main,ol,p,pre,ul,' +
  'a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,' +
  's,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,' +
  'embed,object,param,source,canvas,script,noscript,del,ins,' +
  'caption,col,colgroup,table,thead,tbody,td,th,tr,' +
  'button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,' +
  'output,progress,select,textarea,' +
  'details,dialog,menu,menuitem,summary,' +
  'content,element,shadow,template'
);
// 不区分大小写
var isSVG = makeMap(
  'svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font,' +
  'font-face,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,' +
  'polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view',
  true
);
var isReservedTag = function (tag) {
  return isHTMLTag(tag) || isSVG(tag)
};
// 区分大小写
var isBuiltInTag = makeMap('slot,component', true);

从上我们可以看出，HTML 元素重名警告的标签数大大增加了，但重要的是重名区分大小写，所以我们在使用 Input、Select、Option 等时不用担心重名。这就是 Vue 2.0 引入的Virtual DOM的用处