前端UI组件设计系统【免费下载链接】ant-design-vue An enterprise-class UI components based on Ant Design and Vue. 项目地址https://gitcode.com/gh_mirrors/an/ant-design-vue点击查看免费下载vue-cli 是 Vue 生态中最流行的应用脚手架工具之一本文以 ant-design-vue 官方文档《在 vue-cli 3 中使用》为核心脉络完整演示从安装脚手架、初始化项目到引入 antd 组件并在页面中渲染出第一个按钮的全过程。同时结合本仓库ant-design-vue 4.2.6的源码与构建产物配置深入讲解 Button 组件局部注册、全局注册的底层实现以及 ES modules 按需加载tree shaking的原理帮助你在真实工程中做出正确的接入与优化决策。安装 vue-cli 并初始化项目首先在命令行中安装 vue-cli 脚手架工具。如果你更习惯使用 yarn 包管理器也可以先安装 yarn再通过 yarn 安装 vue-cli$ npm install -g vue/cli # OR $ yarn global add vue/cli安装完成后使用vue create命令新建一个项目这里以antd-demo为例$ vue create antd-demo执行该命令后工具会引导你进行项目配置如选择默认预设、手动选择 Babel/ESLint/Router 等特性随后自动初始化脚手架并安装 Vue 项目的各种必要依赖。如果过程中出现网络问题导致依赖下载缓慢或失败可以尝试配置代理或切换至其他 npm registry例如国内镜像源后重新安装。初始化完成后进入项目目录并启动开发服务器$ cd antd-demo $ npm run serve此时浏览器访问 http://localhost:8080/ 看到Welcome to Your Vue.js App的界面即表示项目运行成功。认识 vue-cli 生成的默认目录结构以下是 vue-cli 生成的默认工程结构理解它有助于后续定位需要修改的文件├── README.md ├── babel.config ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── assets │ │ └── logo.png │ ├── components │ │ └── HelloWorld.vue │ ├── App.vue │ └── main.js └── yarn.lock其中src/main.js是应用入口负责创建 Vue 应用实例并挂载到 DOMsrc/App.vue是根组件。接下来对 antd 的引入就集中在这两个文件中。安装 ant-design-vue使用 yarn或 npm安装 ant-design-vue$ yarn add ant-design-vue也可以使用 npm 并显式指定 4.x 版本线与当前仓库package.json中的版本保持一致$ npm i --save ant-design-vue4.x从本仓库 package.json 可以看到ant-design-vue 4.x 的peerDependencies声明为vue: 3.2.0即它面向 Vue 3 设计使用时请确保工程中安装的是 Vue 3 及以上版本同时engines.node要求12.22.0。修改 src/main.js按需引入 Button 组件编辑src/main.js按需引入 antd 的按钮组件以及样式文件import Vue from vue; import Button from ant-design-vue/lib/button; import ant-design-vue/dist/antd.css; import App from ./App; const app createApp(App); /* 会自动注册 Button 下的子组件, 例如 Button.Group */ app.use(Button).mount(#app);这段代码的要点如下import Button from ant-design-vue/lib/button直接从lib/button子路径引入 Button 组件属于局部注册按需引入方式不会把整个 antd 打入包中import ant-design-vue/dist/antd.css引入全部组件样式。在当前仓库的 英文版文档 中样式文件使用的是ant-design-vue/dist/reset.cssv4 起官方更推荐reset.css组件样式会在运行时由 cssinjs 按需注入两种文件都在包的dist目录下可按需选择app.use(Button)会调用 Button 的install方法完成注册并自动注册其下的子组件例如Button.Group。之所以能自动注册Button.Group可以从源码中找到直接证据。在 components/button/index.ts 中Button.Group ButtonGroup; /* istanbul ignore next */ Button.install function (app: App) { app.component(Button.name, Button); app.component(ButtonGroup.name, ButtonGroup); return app; };即 Button 组件的install钩子会同时调用app.component注册AButton与AButtonGroup两个全局组件因此在模板中可以直接使用a-button和a-button-group。修改 App.vue渲染第一个 antd 按钮接着修改src/App.vue的 template 内容template div idapp img src./assets/logo.png a-button typeprimaryButton/a-button /div /template ...保存后回到浏览器页面上即可看到一个 antd 的蓝色主按钮typeprimary。至此 antd 已成功接入 vue-cli 工程接下来你可以继续选用其他组件开发应用。关于a-button的更多用法可以参考 Button 组件 API 文档type支持primary、default、dashed、link、text、ghost等取值size支持large、middle、small此外还有block、danger、disabled、loading、icon、shape等常用属性并可透传原生 button 的所有属性。深入ant-design-vue 的注册机制与按需加载原理在真实工程中除了按需引入 Button你还可能希望全局注册所有组件或希望打包体积尽可能小。理解 ant-design-vue 的两种接入方式与底层实现能帮助你做出正确选择。方式一全局完整注册如果业务中组件使用面广可以直接从包入口引入并全局注册import { createApp } from vue; import Antd from ant-design-vue; import App from ./App; import ant-design-vue/dist/reset.css; const app createApp(App); app.use(Antd).mount(#app);全局注册的底层实现在 components/index.ts 的install函数中它遍历 components/components.ts 导出的全部组件逐个调用app.use(component)并额外注册StyleProvidercssinjs 样式上下文同时把message、notification以及Modal的info/success/error/warning/confirm/destroyAll等命令式 API 挂载到app.config.globalProperties上方便通过this.$message、this.$confirm等方式调用。方式二按需引入与 tree shakingant-design-vue 默认支持基于 ES modules 的 tree shaking。从 package.json 的构建字段可以看到main: lib/index.js—— CommonJS 构建产物module: es/index.js—— ES modules 构建产物供 webpack 4/5 等支持module字段的打包器优先解析sideEffects中仅对*.css、*.md、site/*等声明副作用组件 JS 逻辑可被安全地 tree-shake。因此直接写import { Button } from ant-design-vue或import Button from ant-design-vue/lib/button打包器就能摇树剔除未使用组件的代码实现按需加载的效果再配合按需引入reset.css或全部dist/antd.css即可兼顾开发便利与产物体积。如果使用 babel 生态仓库的devDependencies中也包含babel-plugin-import可供配置但 v4 官方推荐优先使用 ES modules 自带的 tree shaking无需额外插件。两种方式的取舍全局完整注册写起来最省事所有组件开箱即用但会引入较多组件代码配合 tree shaking 后可缓解按需局部注册如本文示例的app.use(Button)只注册需要的组件包体最小且Button.Group等子组件会自动一并注册。工程化建议与常见问题Vue 版本匹配ant-design-vue 4.x 需要 Vue3.2.0请确认package.json中 vue 版本符合要求若使用旧版 vue-cli 3 默认生成的 Vue 2 项目需要先升级到 Vue 3 及配套的vue/cli-plugin-babel、vue-loader等插件版本仓库自身的 package.json 中即为 Vue 3 webpack 5 的完整依赖组合可作为参考。vue-cli 的定位官方 快速上手 文档提示 Vue CLI 已停止迭代新项目推荐使用 Vite 或 Rsbuild本文所演示的接入流程同样适用于这些现代构建工具只是初始化命令不同。网络与依赖安装安装过慢或报错时可尝试配置 npm 代理或更换 registry 后重试。主题定制接入 antd 后如需修改主色等设计变量可参考 定制主题 文档通过 ConfigProvider 与 cssinjs 的 token 机制完成无需覆盖 CSS 文件。至此你已经掌握了在 vue-cli 3 工程中接入 Ant Design Vue 的完整链路初始化项目 → 安装依赖 → 引入组件与样式 → 注册并渲染组件并理解了全局注册与按需引入各自的底层机制。其他开发流程可以参考 vue-cli 的官方文档继续探索。赞分享前端UI组件设计系统【免费下载链接】ant-design-vue An enterprise-class UI components based on Ant Design and Vue. 项目地址https://gitcode.com/gh_mirrors/an/ant-design-vue点击查看免费下载相关推荐vue/cli-plugin-router 深入指南在 vue-cli 项目中接入 Vue Routervue/cli plugin router 深入指南在 vue cli 项目中接入 Vue Router 本文以 vue cli 仓库中的官方文档 docs前端开发工具构建工具免费高效的Sketch设计稿转HTML工具Marketch终极指南免费高效的Sketch设计稿转HTML工具Marketch终极指南 还在为Sketch设计稿到前端代码的转换而烦恼吗Marketch插件为你提供了一键式解决开发工具前端Code Blocks支持哪些编程语言完整语言列表及使用技巧Code Blocks支持哪些编程语言完整语言列表及使用技巧 Code Blocks是一款专为Google Docs设计的语法高亮插件能帮助用户在文档中优雅创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考