大家在做前端项目开发的时候，经常会遇到公用的一些页面，比如搜索、列表、商品详情卡片、评论列表等。为了提高开发效率、使代码看起来更加简洁，这个时候封装相应的组件是最好的解决方案。今天小编给大家介绍一下如何在uniapp中封装组件，希望对大家能有所帮助！

1、在components目录新建card.vue 组件

2、新建index.vue 页面

3、组件引用方式

1、全局注册方式 main.js直接导入，每个页面都可以直接调用

import card from './components/card/card.vue'

Vue.component('card',card)

2、局部注册方式

通过uniapp的easycom可以简化组件的引用，如果你创建的组件在components目录下，符合 components/组件名称/组件名称.vue 目录结构，就可以在页面直接使用，不需要在单独引用组件。uniapp默认是开启easycom配置的。所以可以直接使用。

传统的引用方式：

IT技术分享社区

个人博客网站：https://programmerblog.xyz

文章推荐程序员效率：画流程图常用的工具程序员效率：整理常用的在线笔记软件远程办公：常用的远程协助软件，你都知道吗？51单片机程序下载、ISP及串口基础知识硬件：断路器、接触器、继电器基础知识

精彩链接

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。