概述

Ant Design作为一门设计语言面世，经历过多年的迭代和积累，它对UI的设计思想已经成为一套事实标准，受到众多前端开发者及企业的追捧和喜爱，也是React开发者手中的神兵利器。

ant-design-vue 是 Ant Design 的Vue实现，组件的风格与Ant Design保持同步，组件的html结构和css样式也保持一致，真正做到了样式0修改，组件API也尽量保持了一致。

 

致此，Ant Design 已经全面覆盖了 React、Angular、Vue 三大前端框架，向着世界第一好用的 UI 设计语言迈进。

 

Ant-deign-vue的官网地址是：

https://vue.ant.design/docs/vue/introduce-cn/

 

资料不全问题

但是，Ant-deign-vue官网的文档信息相当简略，即使以前做过vue和react开发，从入门到实战也是有相当困难。

其次，由于Ant-deign-vue是2019年初发布的，所以全网，包括CSDN上的经验分享也都很少。

我试着摸索，不可避免地掉进坑里，尤其是官方文档不完善的坑。

 

布局的官方示例

https://vue.ant.design/components/layout-cn/中给的API示范如下：

 

API #

<Layout>
  <Header>header</Header>
  <Layout>
    <Sider>left sidebar</Sider>
    <Content>main content</Content>
    <Sider>right sidebar</Sider>
  </Layout>
  <Footer>footer</Footer>
</Layout>

以上示例一执行，在控制台就会出现以下错误：

[Vue warn]: Unknown custom element: <Layout> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[Vue warn]: Unknown custom element: <Sider> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

上网查了一夜无果，偶然发现一篇使用经验《ant design of vue 使用记录》，里面关于布局的代码是：

1. <a-layout-sider :trigger="null" collapsible :collapsed="collapsed" style="background: #fff"

2. breakpoint="lg"

3. collapsedWidth="80"

4. @breakpoint="onBreakpoint"

5. >

6. </a-layout-sider>

对照官网其他组件的文档，组件使用时的标签名均以"<a-"开始，于是将布局的官方代码改为：
 

<a-layout>
  <a-header>header</a-header>
  <a-layout>
    <a-sider>left sidebar</a-sider>
    <a-content>main content</a-content>
    <a-sider>right sidebar</a-sider>
  </a-layout>
  <a-footer>footer</a-footer>
</a-layout>

运行，出现一堆错误：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <a-header> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

header\sider\content\footer全都不认。

再参考《ant design of vue 使用记录》文章，将所有布局标签均增加layout词干，代码如下：

<a-layout>
  <a-layout-header>header</a-layout-header>
  <a-layout>
    <a-layout-sider>left sidebar</a-layout-sider>
    <a-layout-content>main content</a-layout-content>
    <a-layout-sider>right sidebar</a-layout-sider>
  </a-layout>
  <a-layout-footer>footer</a-layout-footer>
</a-layout>

再次运行，成功。

 

官方示例代码躲猫猫

那就奇怪了，官方示例布局怎么没有代码呢？

我在项目的github上提了一个issue，实际只是建议，希望文档更具指导性。得到高高在上的答复是：认真读文档。

我以为是我浏览器兼容性有问题，于是firefox,chrome,360换了一个遍，还是不能一眼看到示例代码在哪里。出了鬼了。

终于在我累得老眼昏花之际，让我在每个示例布局下面文字说明淡淡的右边框里发现了淡淡的 “<>”图标，点击图标，示例布局的代码出来了。

好吧，我承认我笨，不如各位前端大神们智慧。

但是，这就是各位前端大神推崇的“易用性、可访问性、用户友好么”？

顶级团队尚且如此，这个风气传播出开来，不知道是什么局面。

 

不过，我也理解官方团队忙着开发，人手少，需要社区大家都贡献力量。但一句高傲的“认真读文档”回答，真的是……

 

好吧，希望我这篇记录，可以帮助跟我一样笨的芸芸众生能尽快用上ant-design-vue。

小结

1.IT人员写文档，就是天书

2.即使ANT-DESIGN是一个设计语言，但其团队对于易用性、可访问性、用户友好性的认识，从骨子里也是极为排斥的。

3.ant-design-vue组件标签命名规则均有a-

后续请教

1.如何得到vue中所有注册的组件的标签名称呢？多谢指教