概述

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 使用记录》，里面关于布局的代码是：

<a-layout-sider :trigger="null" collapsible :collapsed="collapsed" style="background: #fff"
breakpoint="lg"
collapsedWidth="80"
@breakpoint="onBreakpoint"
>
</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中所有注册的组件的标签名称呢？多谢指教

Ant-deign-vue入门：布局－官方文档踩坑相关推荐

ASP.NET Core Razor官方文档踩坑
环境:ASP.NET Core 3.1 工具:VS2019 官方文档的起始页地址:教程:使用 ASP.NET Core 创建 Razor Pages Wb 应用 | Microsoft Learn 添 ...
janusgraph 引入 java_JanusGraph入门第一课和官方文档踩坑
入门第一课是在IDEA里创建一个项目,有些小曲折.这里运行的Demo是读取janusgraph示例的"神之图"(Graph of the Gods)数据并打印,采用Hbase+ES ...
ExoPlayer详解——入门（官方文档）
ExoPlayer详解系列文章 ExoPlayer详解--入门(官方文档) ExoPlayer详解--媒体类型(官方文档) ExoPlayer详解--高级主题(官方文档) 一.ExoPlayer,你好 ...
Ant Design 入门-参照官方文档使用组件
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 先来一个按钮组件使用的对比,官方文档的(不能直接用)和实际能用的. 官网demo: import { Tabl ...
阿里云OSS | 对象存储服务快速入门 | 参考官方文档实现使用JavaSDK上传文件 | 本地上传与web上传案例
参考文档 : 点击查看文章目录运行环境一.OSS相关概念 1.1 Storage Class 存储类型 1.2 Bucket 存储空间 1.3 Object 对象 1.4 Region 地域 1 ...
Solr入门之官方文档6.0阅读笔记系列(八) 相关过滤器
第三部分 : Understanding Analyzers, Tokenizers, and Filters Filter Descriptions You configure each fil ...
jeesite配置指南（官方文档有坑，我把坑填了！）
昨天,远在苏州的朋友找我一起做个私活,主要用到jeesite. 说实话,开发了这么多年的javaweb项目,我还是第一次知道jeesite. 起初我担心没有做私活的时间,生活安逸,工作随心,对于接私活 ...
ExoPlayer详解（官方文档-入门）
目录 ExoPlayer详解系列文章-入门一.前言二.优缺点比较三.概述 ExoPlayer详解--入门(官方文档) 添加ExoPlayer作为依赖项 1.添加依赖 2.添加ExoPlayer模 ...
基于vue的微信小程序开发5分钟上手教程（官方文档转）
使用手册 mpvue 继承自 Vue.js,其技术规范和语法特点与 Vue.js 保持一致. 注:其实就是官方文档,只是习惯看博文学习才直接copy过来的,详见官方文档本文档适用于有一定 Vue.j ...
提高编程水平的一段必经之路，研读官方文档
刚才看了论坛里 jinxfei 的十年总结(14):从CS转向BS, 说实话,大部分内容我没有太仔细的看,不过如下的一段引起了我的注意: 真正让我心里有底的,还是在看了官方文档之后:http://s ...

Ant-deign-vue入门：布局－官方文档踩坑

概述