皮皮网

1.基于Ant Design of Vue的码分粗糙组件封装-左右分栏
2.从零开发基于antdv的网站-002-网站属性与路由与布局
3.又双叒叕一个Ant Design的Vue轮子(vue-antd-ui)
4.从零开发基于antdv的网站-004-请求接口数据及配置后端服务
5.Vue版本的Ant Design移动端组件库来啦
6.Ant Design Vue 3.0 的那些正经事儿

基于Ant Design of Vue的粗糙组件封装-左右分栏

       本文将围绕如何基于Ant Design of Vue进行组件封装，实现左右分栏布局进行探讨。码分

       在进行组件设计时，码分我们首先需要考虑布局方案。码分鉴于当前组件为横向左右布局，码分我们选择使用antd组件中的码分盲盒源码phpGrid栅格布局组件，以实现灵活且响应式的码分布局效果。

       接着，码分为了满足左右部分包含头部和主体内容的码分需求，我们采用antd组件中的码分Card卡片组件。Card组件的码分内置间距和样式能够满足基本需求，无需额外定制样式，码分简化了开发流程。码分

       在设计细节中，码分考虑到默认滚动条的码分样式可能无法满足美观需求，我们引入了自定义滚动条的less样式设计。这样可以进一步提升用户体验和界面美观度。

       实现上述功能后，我们对组件进行了初步的展示，用户能够直观地看到左右分栏布局的效果。尽管当前版本还存在一些待优化之处，如滚动条设计、界面细节完善等，但我们鼓励用户提出宝贵意见，共同推动组件功能的进一步完善。

       综上所述，本文旨在提供一个基于Ant Design of Vue实现左右分栏组件封装的案例，通过介绍选用的组件、自定义样式以及展示使用效果，希望能为开发者在类似场景下提供参考和启发。未来，我们期待通过不断优化和完善，构建出更加成熟、zblog博客模板源码美观且易于使用的组件。

从零开发基于antdv的网站--网站属性与路由与布局

       针对初学者，本文旨在介绍如何基于 Vue 3.x & Ant Design Vue 4.x 开发网站。如发现错误或疑问，欢迎在评论区留言，我将解答。

       本文在前作基础上，指导如何将标准项目改造为自定义项目。首先，关闭 ESLint 负责的代码检查，以简化开发过程。在 vue.config.js 文件内增加相关代码以实现。

       引入 @ 配置优化文件引用，通过设置 src 目录为 @ 目录，简化相对路径使用，避免因目录结构变动导致的错误，提升开发效率。

       通过 vue.config.js 文件的 chainWebpack 设置，修改网站的标题与关键词等元信息。同时，在 public/index.html 文件中直接添加相关元素，确保配置生效。

       调整 src/assets 目录结构，新增 logo-full.png ，确保网站标识清晰、统一。

       实现页面整体上中下布局，通过创建 src/layout/*.vue 文件完成布局结构搭建。

       借助 vue-router 实现路由功能。先执行命令安装组件，然后在 src/views/index.vue、src/router/index.js 文件中分别添加页面视图与路由配置。趣味网页搭建源码

       在 main.js 文件中引入路由，并在 App.vue 文件中实现路由切换，以实现导航功能。

       删除无用的 HelloWorld.vue 组件，优化代码结构。项目整体目录结构得到调整，布局更加清晰。

       启动项目前，执行命令安装依赖。若无报错，即可启动项目。通过命令运行，检查项目是否正常启动，最后验证页面效果。

       至此，文章介绍完毕。感谢关注后续内容，如有问题请在评论区反馈。期待您的参与与支持。

又双叒叕一个Ant Design的Vue轮子(vue-antd-ui)

       Vue-antd-ui：Ant Design for Vue的全面解决方案

       这个项目旨在为Vue开发者提供Ant Design的强大设计和功能，鉴于Vue开发者对Ant Design的热爱和市场上缺乏完整支持的情况，vue-antd-ui应运而生。

       为什么选择vue-antd-ui？首先，Ant Design在组件数量和质量上占据优势，尽管个人审美各异，但其设计风格深受认可。其次，市面上许多Ant Design的Vue实现要么已停止维护，要么功能有限。vue-antd-ui的目标是让Vue开发者无需因组件库问题而舍弃Vue，享受Ant Design的优秀体验。

       vue-antd-ui的印尼014溯源码特点如下：

       完全遵循Ant Design 3.4.0版本，保证一致性

       整合Ant Design生态系统，共享资源

       采用按需加载，减少资源消耗

       兼容Ant Design官方的babel-plugin-import

       支持受控与非受控组件，注重灵活性

       尽管面临挑战，如Ant Design迭代迅速，单靠个人或小团队难以与之抗衡，但vue-antd-ui目前基于3.4.0版本提供了丰富的组件，足以满足大部分需求。我们承诺会持续更新和修复bug，期待用户的参与和反馈，共同推动项目发展。

       特别感谢Ant Design团队的辛勤工作，vue-antd-ui在复用其代码中受益匪浅，我们期待Ant Design能在Vue、React和Angular等框架中发挥更大的作用。

从零开发基于antdv的网站--请求接口数据及配置后端服务

       在本系列针对前端开发初学者的教程中，我们将探索如何基于 Vue 3.x 和 Ant Design Vue 4.x 构建一个网站。从环境配置到数据交互，每一步都将细致讲解。在本章中，我们将重点关注前端如何通过 Axios 请求后端接口数据，包括接口设计、页面集成和后端服务配置。已完成的三国演义人物大全页面可在三国史诗馆网站查看，但细节将在后续章节深入剖析。

       首先，我们会安装 Axios，一个用于浏览器和 Node.js 的网络请求库，以及 Ant Design 的矢量图标组件。然后，我们会创建一个请求工具类，包括基本的小程序bc源码接口请求方法，如向 /record/personage/getPage 发送 POST 请求。页面中，数据交互部分将从人物大全页面开始，通过 Vue Router 定义路由。

       在开发环境中，后端地址需要在 vue.config.js 中配置，而在生产环境中，通常通过 Nginx 转发接口请求。完成这些步骤后，前端部分的任务就绪，启动项目后，你将看到初步的页面效果。

       如果你在过程中遇到问题或有任何疑问，欢迎随时在文章下方留言，我将竭诚解答。后续章节会有更多关于页面设计和数据处理的精彩内容，敬请期待。

Vue版本的Ant Design移动端组件库来啦

       本文介绍一个Vue版本的Ant Design移动端组件库的开发与使用。本人对Ant Design的风格及设计理念情有独钟，但由于公司技术栈为Vue，且官方认可的ant-design-vue库解决了Vue桌面端使用Ant Design的问题，然而移动端组件库（ant-design-mobile）尚未有Vue移植版本。

       为填补这一空白，本人在开发公司移动端办公系统的过程中，持续地将antd-mobile的组件进行“翻译”移植至Vue版本。经过数月努力，现已成功移植了约%的组件，涵盖大部分常用组件。

       整体来看，组件移植工作难度并不大，未完成移植的组件主要是因为项目中并未使用到，所以缺乏进一步的动力。若读者有其他组件需求，欢迎在文章或GitHub项目页面留言，本人将尽快响应。

       GitHub项目地址：[项目链接]

       与原antd-mobile组件库相比，本项目目前共移植了个组件，覆盖了原库约%的组件（原库共个组件）。

       关于引入方式，非CDN方式仅支持TypeScript。而按需引入则需要借助babel-plugin-import插件，以实现仅引入项目中真正需要的组件，有效减小项目体积。

       对于按需加载的配置，可以将babel.config.js文件修改为：

Ant Design Vue 3.0 的那些正经事儿

       Ant Design Vue 3.0 的发布并非仓促之举，它标志着一个重要的里程碑，旨在提供更深入的源码重构、增强的功能特性、优化的易用性和性能提升。以下是3.0版本的主要亮点：

       1. **源码重构与提升**：从 TypeScript 和 Composition API 开始，大部分组件已切换至这种架构，以提升类型提示和管理复杂度。虽然Vue 3在TS支持上有所增强，但组件库的泛型组件和属性类型复用仍面临挑战。团队鼓励对TS技术熟练者加入，共同改进。

       2. **功能同步更新**：3.0引入了AntD 4.x的多项功能，如自定义时间库、虚拟滚动、暗黑主题、无障碍辅助和RTL支持，以及CSS Variables。

       3. **易用性优化**：在Table、TreeSelect等组件的自定义渲染API上，3.0简化了配置，引入统一的`v-slot`命名，减少了配置膨胀和未来扩展的风险。

       4. **性能改进**：FormItem的渲染优化、TreeNode的废弃以及Tree和TreeSelect的虚拟滚动功能，旨在提升组件的性能和大数据渲染能力。

       尽管Table暂未支持虚拟滚动，但团队计划推出专门的产品解决大数据问题，预计在接下来的1-2个月推出。

       升级Ant Design Vue 3.0，你可以期待更简洁的代码、更好的性能，以及与社区的持续互动。如果你对这些改变感兴趣，别错过月日的Vue专场会议，详细内容可通过关注公众号获取。

antdesign能用vue吗?

       要探讨 AntDesign 是否能与 Vue 框架结合使用，我们首先需要理解 AntDesign 和 Vue 的基本特性。AntDesign 是一套阿里巴巴集团基于其内部设计规范打造的开源设计系统，广泛应用于前端开发。而 Vue 是一个用于构建用户界面的渐进式框架，易于学习且具有强大的可扩展性。

       虽然 AntDesign 官方没有提供 Vue 版本，但 Vue 社区提供了一些替代方案。比如，iView 和饿了么的 Element 都是基于 AntDesign 设计规范的库，能够与 Vue 框架无缝集成。这些库为 Vue 开发者提供了丰富的组件库和设计系统，帮助他们快速构建美观且遵循统一设计规范的界面。

       使用这些库，Vue 开发者可以享受到与 AntDesign 相同的设计理念和组件风格，同时利用 Vue 的灵活性和易用性。这为跨平台开发和团队协作提供了便利，因为不同团队成员可以使用各自熟悉的框架和库，而项目仍然保持统一的视觉风格。

       例如，iView 提供了大量预构建的组件，涵盖了常见的 UI 元素，如按钮、表格、导航栏等，所有组件都遵循 AntDesign 的设计准则，确保了视觉一致性。同样，饿了么的 Element 也是基于 AntDesign 的设计体系，提供了丰富的 UI 组件和工具，满足各种应用场景。

       综上所述，虽然 AntDesign 自身不提供 Vue 版本，但通过 iView 和 Element 等第三方库，Vue 开发者能够轻松地将 AntDesign 的设计系统和组件集成到自己的 Vue 项目中。这不仅能够提升界面的美观度，还能促进团队间的协作效率，确保开发出的产品符合统一的设计规范。

Antd源码浅析之Icon组件

       在进行B端项目开发时，我使用了Ant Design，其简洁优雅的设计深受喜爱。为了更好地理解其内部机制，我打算浅析Ant Design的Icon组件，尽管技术基础有限，但仍希望能有所收获。本文主要针对Ant Design 3.4.4 的源码进行分析，前提是你对JavaScript、React有一定了解。Antd定位为企业级产品的设计体系，适用于构建后台页面，比如CMS系统，它在React的世界里，就像Bootstrap与jQuery的对应关系，Vue也有Element UI这样的伴侣。

       Antd源码基于TypeScript，一种JavaScript的类型超集，由微软开发，用于进行静态类型检查，比如Vue使用Flow。JavaScript虽为弱类型，但大型库如Antd选择严谨，采用TypeScript或Flow。

       打开Antd的源码目录，组件结构清晰，Icon组件位于components文件夹内。组件文档详细，包括英文说明，可在官网查看。接下来，我们将深入核心代码，index.tsx是关键文件，它使用了Typescript的jsx语法，最终编译为.js文件。

       在index.tsx中，可以看到Icon组件的定义，包括参数如spin（旋转动画）、style（样式）和type（图标类型）。官网还提供了示例和API描述，如spin参数默认为false，style为对象，type为字符串。

       代码中，Antd引入了classnames处理动态CSS，omit.js则用于过滤不需要传递的属性。IconProps是参数校验器，确保接收数据有效，Antd采用TypeScript替代React的PropTypes进行类型检查。

       主体代码中，Antd使用了标签实现Icon，首先通过IconProps验证参数，然后根据传入的type动态生成CSS类名。最后，通过omit函数过滤掉type和spin，因为它们在HTML标签中无意义。通过一个实例，我们可以看到生成的HTML代码。

       总结来说，Antd的Icon组件实现原理清晰，虽然涉及TypeScript的使用可能对部分读者来说是个新概念，但其实质是数据类型校验。通过这个过程，我们可以学习到如何利用TypeScript来增强代码的类型安全性和可维护性。