.item{padding:30rpx;margin-bottom:30rpx;background-color:#FFF;.title{font-weight:bold;padding-bottom:30rpx;border-bottom:2rpxsolid#F5F5F5;}.content{padding-top:30rpx;align-items:flex-开始;.info{宽度:calc(100%-160rpx);.summary{颜色:#777;高度:80rpx;字体大小:24rpx;行高:1.6;边距底部:10rpx;@includetext-ellipsis(2);}.date{font-size:24rpx;color:$main-color;opacity:0.6;}.views{color:#999;font-size:24rpx;}}.cover{width:140rpx;height:120rpx;.img{width:100%;height:100%;border-radius:4rpx;}}}}大家在做前端项目开发的时候，经常会遇到一些常用的页面，比如搜索、列表、商品详情卡片、评论列表等，为了提高开发效率和为了让代码看起来更简洁，封装相应的组件是此时最好的解决方案。今天给大家介绍一下如何在uniapp中打包组件，希望对大家有所帮助！1.在components目录新建card.vue组件{{item.title}}{{item.digest}}{{item.publishDate}}{{item.viewCount}}阅读/template>.item{padding:30rpx;margin-bottom:30rpx;background-color:#FFF;.title{font-weight:bold;padding-bottom:30rpx;border-bottom:2rpxsolid#F5F5F5;}.content{padding-top:30rpx;align-items:flex-开始;.info{宽度:calc(100%-160rpx);.summary{颜色:#777;高度:80rpx;字体大小:24rpx;行高:1.6;边距底部:10rpx;@includetext-ellipsis(2);}.date{font-size:24rpx;color:$main-color;opacity:0.6;}.views{color:#999;font-size:24rpx;}}.cover{width:140rpx;height:120rpx;.img{width:100%;height:100%;border-radius:4rpx;}}}}2.新建一个index.vue页面3、组件引用方式1）、全局注册方式main.js直接导入，每个页面都可以直接调用importcardfrom'./components/card/card.vue'Vue.component('card',card)2)、本地注册方式可以通过uniapp的easycom简化组件引用，如果你创建的组件在components目录下，符合components/组件名/组件名.vue目录结构可以在页面直接使用，默认不需要引用组件uniapp。默认情况下启用easycom配置。所以可以直接使用。传统参考方法：个人博客网址：https：//程序员博客.xyz
