uni-app vue3 全局引入ant-design

最新推荐文章于 2025-10-16 08:54:01 发布

原创最新推荐文章于 2025-10-16 08:54:01 发布 · 6.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#大数据

uni-app 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何将uni-app项目切换到Vue3版本，并详细讲解了安装与全局注册ant-design-vue插件的过程。在升级过程中需要注意组件注册的位置，避免出现Vue警告信息，如`[Vuewarn]: Failed to resolve component: a-input`。

uni-app切换为vue3版本

安装ant-design-vue插件

全局完整注册

uni-app切换为vue3版本

新建一个项目

切换为vue3

选择版本为3即可

安装ant-design-vue插件

npm i --save ant-design-vue

全局完整注册

注意写到下面的vue3中上面是vue2...

之前我就错写到了vue2中导致警告信息

[Vue warn]: Failed to resolve component: a-input
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

查查茶茶丸

关注关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【ant-design-vue】ant-design-vue在uniapp使用时，auto-import失败报错

Minf的博客

09-15

2108

在我的 uniapp + vue3 + vite 项目中，使用了 ant-design-vue @4.x 组件库，同时我还使用了 vite 插件用于自动导入vue3的组合式api。当我全局引用antd-vue时，开发模式下可以正常运行，却不能正常打包，于是开始了漫长的踩坑……

如何在 Vue 3 中使用 Ant Design

2 条评论

weixin_42187290 2022.08.22
小程序 app.use(组件) 报错 TypeError: Vue.filter is not a function 也就是说 use 这个方法用不了这是为什么？？？

weixin_45776068 2022.07.30
你好，请问uni-app引入ant design在安卓手机上可以实现吗？我看好像只能H5端可以

组织架构树形选择组件使用说明（Vue3 + UniApp）

最新发布

csdn_silent的博客

10-16

1106

仿钉钉组织架构微信小程序

UniApp首页与导航页设计开发全攻略，让你轻松掌握！

专注java二开部署

12-23

1396

UniApp是一款基于Vue.js框架的跨平台开发工具，可以帮助开发者使用一套代码快速构建出多个平台的应用程序，如iOS、Android、Web等。在UniApp中，首页和导航页是应用程序中必备的两个页面，本文将介绍如何在UniApp中设计和开发这两个页面，并给出相应的代码示例。通过使用UniApp开发工具，我们可以轻松实现多个平台的应用程序。本文介绍了UniApp中首页和导航页的设计与开发方法，并提供了相应的代码示例。希望读者能够通过本文的指导，快速掌握UniApp的开发技巧，实现精美的首页和导航页设计。

uni-app 、Spring Boot 、ant Design 打造的一款跨平台包含小说（仿真翻页、段落听书）、短视频、壁纸等功能含完备后台管理的移动应用

tuonioooo

11-08

1823

咪哩快看，为用户提供优质阅读，短视频，共同记录美好生活的移动应用，并含有一套完备的后台管理体系，助力开发者快速数字化，开启你的财富之门！

【Ant-design引入】

qq_46139762的博客

05-02

5347

Ant-design引入Ant-design1、uniapp引入2、vue2引入 Ant-design 1、uniapp引入 1、控制台输入vue add ant-design 2、main.js写入如下代码 import Antd from 'ant-design-vue' import 'ant-design-vue/dist/antd.css'; Vue.use(Antd) 3、APP.vue中onLunch方法中改写入 Ps:若安装后出现初始界面变成App.vue这一界面可用此方案解决 onLau

【Vue3】集成 Ant Design Vue

又言又语

08-21

1046

本文介绍 Vue3 集成 Ant Design Vue 的方法步骤。Ant Design 是蚂蚁集团和 Ant Design 开源社区推出的一套基于 React 的 UI 设计语言和组件库，适用于企业级中后台产品。Ant Design Vue 是基于 Ant Design 和 Vue 技术栈的实现。本文只介绍了全局完整注册 Ant Design Vue 的方法，适用于对打包文件大小不敏感的场景，除此外还可以全局部分注册和局部注册组件，参考官方文档。

NaiveUI / AntDesign Vue

xuukai的博客

03-17

928

通知（NNotificationProvider）：用于显示通知消息。消息提示（NMessageProvider）：用于显示简单的消息提示。对话框（NDialogProvider）：用于显示对话框。面包屑（NBreadcrumb）：用于显示当前页面的路径。面包屑（Breadcrumb）：用于显示当前页面的路径。通知（Notification）：用于显示通知消息。消息提示（Message）：用于显示简单的消息提示。抽屉（NDrawer）：用于侧边弹出的面板。抽屉（Drawer）：用于侧边弹出的面板。

【UniApp】-uni-app-内置组件

Reische的博客

12-13

1467

好，经过上个章节的介绍完毕之后，了解了一下 uni-app-全局数据和局部数据那么了解完了uni-app-全局数据和局部数据之后，这篇文章来给大家介绍一下 UniApp 中内置组件首先不管三七二十一，先来新建一个项目。

Vue3+Vite代码混淆指南

____Mr.Y的博客

04-18

1316

构建后文件混淆：直接混淆已构建的JS文件，最简单且稳定的方式，适合大多数生产环境一步式构建混淆：一次命令同时完成构建和混淆，简化操作流程源代码混淆：针对源代码进行混淆，更复杂但灵活性高，适合有特殊安全需求的场景。

在Uniapp中正确使用Ant Design Mini表单组件的实践指南

gitblog_07031的博客

06-30

686

在Uniapp中正确使用Ant Design Mini表单组件的实践指南 Ant Design Mini作为支付宝小程序的原生UI组件库，在Uniapp跨端开发中也能发挥重要作用。本文将详细介绍如何在Uniapp项目中正确使用Ant Design Mini的表单组件，特别是解决form-input组件引用和表单提交的常见问题。核心问题分析许多开发者在Uniapp中使用Ant Design Mi...

绑定手机号登录-VUE模板 UNIAPP模板布局、样式、JS分离

04-02

绑定手机号登录-VUE模板 UNIAPP模板布局、样式、JS分离帮助手机号认证服务由中国联通提供本机号码一键登录其他手机号码登录我已阅读并同意用户协议和隐私政策以及《中国联通认证服务条款》其他方式登录 VUE模板 UNIAPP模板布局、样式、JS分离

uni-app使用的演示

10-27

文章中用到的例子都有写在这，需要的朋友可以下载下来，解压后拖到HBuilder X里面运行。该资源里面包含了foreach循环的演示，以及如何实现登录动画、如何进行下拉刷新、如何进行触底加载，还有如何进行跳转与接收数据，以及底部导航栏运用colorui的框架技术。

Uniapp使用antd组件库

weixin_68658847的博客

08-18

1473

Uniapp使用antd组件库

uniapp中使用TDesign-mini-program

QingHuanWu的博客

03-25

2096

如何在uniapp中使用TDesign-mini-program

uniapp 微信小程序引入TDeign

ChuChen_HaoLi的博客

12-18

2719

下载完可以在node_modules中找到 miniprogram_dist里面就是所有的组件。把 tdesign-miniprogram 替换成 wxcomponents/tdesign 即可。假如你要使用Button 在page.json引入。打开TDesign微信小程序的官网。以 Button 按钮为例。运行到微信小程序查看效果。在页面就可以直接使用。

1.使用uniapp搭建微信小程序项目并引入前端组件资源

KelvinLiu

05-08

2702

使用uniapp开发微信小程序，引入vue3下的前端组件库，uview3

微信小程序 - 超详细 TDesign 组件库环境搭建，微信小程序项目开发中引入并使用 tdesign 组件库的详细教程（腾讯 TDesign 组件库与微信小程序开发）

🏆 前端领域优质创作者

05-11

1万+

微信小程序tdesign组件库，微信小程序安装配置tdesign组件库详细教程，微信小程序TDesign组件库环境搭建，微信小程序引入并使用TDesign组件库，关于tdesign组件库的微信小程序版的使用教程，微信小程序tdesign框架引入使用教程，微信小程序tdesign框架的详细引入配置教程文章推荐，微信小程序如何引入并使用tdesign组件库，微信小程序使用配置腾讯的tdesign组件库，tdesign组件库怎么在微信小程序中使用，tdesign组件库如何在微信小程序使用的详细教程，tde

Ant Design Mini 在小程序中的使用

z001126的博客

12-14

2906

今天来给大家分享一下在原生小程序中或者uniapp中的使用。Ant Design Mini 在小程序中的使用。Ant Design Mini 在原生微信小程序中使用。Ant Design Mini 在 uni-app 中使用。 Ant Design Mini 在支付宝小程序中引用。

uni-ui若只想使用其中的某些ui如何操作

06-17

<think>我们正在讨论Uni-App中的UI组件库按需引入问题。根据引用内容，有几个关键点需要注意：1.引用[5]提到了局部导入的概念，即在需要的地方导入特定组件，这适用于AntDesignVue，但原理类似。2.引用[3]中对比了uViewUI的高度可定制性，说明第三方组件库可能支持按需引入。3.引用[1]和[2]提到了自定义组件和组件库开发，但按需引入主要涉及使用组件库时的优化策略。在uni-ui中，按需引入通常有两种方式：方式1：使用uni_modules方式（推荐，因为uni-ui已支持uni_modules）方式2：传统方式，手动复制需要的组件到项目，并配置pages.json由于用户使用的是uni-ui（官方组件库），我们可以参考以下步骤：步骤1：在uni-app项目根目录下，通过HBuilderX的插件市场导入uni-ui（如果尚未安装）。步骤2：在需要使用组件的页面或组件中，通过`import`引入特定的组件（注意：uni-ui的组件支持按需引入）。步骤3：在页面或组件的配置中注册组件（使用components选项）。步骤4：在模板中使用。具体操作：以引入`uni-badge`为例：1.在页面中引入：在页面的`<script>`标签中：```javascriptimportuniBadgefrom'@/uni_modules/uni-badge/components/uni-badge/uni-badge.vue'exportdefault{components:{uniBadge},//...其他代码}```2.在模板中使用：```html<uni-badgetext="1"></uni-badge>```另外，也可以全局注册（但这样就不是按需引入了），在main.js中：```javascriptimportuniBadgefrom'@/uni_modules/uni-badge/components/uni-badge/uni-badge.vue'Vue.component('uni-badge',uniBadge)```但按需引入通常指在需要的地方局部引入，避免全局引入所有组件。注意：uni-ui的组件已经发布到uni_modules，所以路径中会有`@/uni_modules/`。另外，引用[5]中提到的局部导入方法（针对AntDesignVue）与上述方法类似，都是通过import然后局部注册。对于第三方组件库如uViewUI、TuniaoUI等，按需引入方法可能略有不同，通常需要参考其官方文档。例如uViewUI提供了按需引入的说明，可能需要借助babel插件或者手动导入。总结：在uni-ui中按需引入特定UI组件的步骤是：安装uni-ui（通过uni_modules）->在需要的页面中import组件->在components选项中注册->在模板中使用。相关问题：1.按需引入相比全局引入有什么优势？2.在uni-app中，如何全局引入一个UI组件？3.除了uni-ui，还有哪些支持按需引入的uni-appUI组件库？</think>### 如何在 Uni-UI 中按需引入特定 UI 组件在 Uni-App 中使用 Uni-UI 组件库时，按需引入特定组件可有效减小包体积，提高应用性能。以下是具体操作步骤： #### 方法 1：通过 `uni_modules` 自动导入（推荐） ```javascript // 在页面/组件的 <script> 中 import uniBadge from '@/uni_modules/uni-badge/components/uni-badge/uni-badge.vue' export default { components: { uniBadge }, // 局部注册 // ... } ``` ```html  <uni-badge text="123"></uni-badge> ``` **特点**： - 无需全局注册，组件仅在当前页面生效 - HBuilderX 会自动处理组件依赖 - 路径中的 `@/uni_modules/` 是 Uni-App 的组件模块标准目录[^1] #### 方法 2：手动导入组件文件 ```javascript // 复制组件文件到项目目录（如 /components/uni-badge） import uniBadge from '@/components/uni-badge/uni-badge.vue' export default { components: { uniBadge }, // ... } ``` **适用场景**： - 需深度定制组件源码时 - 项目未使用 `uni_modules` 管理 #### 方法 3：全局注册（不推荐按需场景） ```javascript // main.js import uniBadge from '@/uni_modules/uni-badge/components/uni-badge/uni-badge.vue' Vue.component('uni-badge', uniBadge) ``` **注意**：此方式会使组件全局可用，增加包体积[^3]。 ### 关键优化建议 1. **组件库选择**： - 优先选用支持 Tree Shaking 的组件库（如 uView UI[^3]） - 对比组件体积：官方基础组件 < uView < TuniaoUI[^2][^4] 2. **构建配置**： ```javascript // vue.config.js module.exports = { transpileDependencies: ['@dcloudio/uni-ui'] // 确保 ES6 语法转译 } ``` 3. **按需引入原则**： - 表单类组件（如 `uni-forms`）建议全局注册 - 展示类组件（如 `uni-badge`）建议局部注册 - 避免嵌套引入未使用的子组件[^5] > **实践提示**：通过 HBuilderX 的「运行->运行到小程序」时的体积分析报告，可精准检测组件引入效果[^1]。