概述

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中所有注册的组件的标签名称呢?多谢指教

 

Logo

前往低代码交流专区

更多推荐