问题复现
使用的是vant cdn方式引入框架，而非vue-cli 在使用一些组件，如宫格，复制文档的示例代码， 但是并不能正常运行，效果如下图。
<div id="app"> <van-grid> <van-grid-item icon="photo-o" text="文字" /> <van-grid-item icon="photo-o" text="文字" /> <van-grid-item icon="photo-o" text="文字" /> <van-grid-item icon="photo-o" text="文字" /> </van-grid> </div>
效果图：
出现问题的原因
在经过一番寻找资料后，最终在github的issue中找到关于该问题的答复：
Vue 不支持在 HTML 里直接使用自闭合标签，Vue 官方文档里有说明的，请使用完整的标签
在vue的文档中找到以下相关描述
自闭合组件表示它们不仅没有内容，而且刻意没有内容。其不同之处就好像书上的一页白纸对比贴有“本页有意留白”标签的白纸。而且没有了额外的闭合标签，你的代码也更简洁。
不幸的是，HTML 并不支持自闭合的自定义元素——只有官方的“空”元素。所以上述策略仅适用于进入 DOM 之前 Vue 的模板编译器能够触达的地方，然后再产出符合 DOM 规范的 HTML。
html规范中对于自闭和标签有强制规范，用户不可自定义新增， 所以我们在示例代码中的·van-grid-item·标签不能正常工作。 在vue-cli中能正常工作的原因是，我们的xxx.vue文件会经过vue编译器，编译成规范的html代码，然后再运行。 原文
博客链接：https://blog.siammm.cn/archives/265
问题解决
<div id="app"> <van-grid> <van-grid-item icon="photo-o" text="文字"></van-grid-item> <van-grid-item icon="photo-o" text="文字"></van-grid-item> <van-grid-item icon="photo-o" text="文字"></van-grid-item> <van-grid-item icon="photo-o" text="文字"></van-grid-item> </van-grid> </div>
