uni_modules 入门，插件不是复制进项目就完事---插件和uni_modules

新手很容易有一个习惯。

页面缺图标，找插件。

缺日期选择器，找插件。

缺导航栏，找插件。

插件当然能省时间。但插件也会带来依赖、版本、样式覆盖、包体积、兼容性问题。

更重要的是，uni_modules 不只是"放组件的目录"。它是 uni-app 的包管理方案。

这一篇不鼓励你疯狂装插件，而是讲清楚：什么时候该用插件，怎么评估插件，uni_modules 目录到底藏了什么。

太长不看版

uni_modules 是 uni-app 的包管理方案，不只是组件目录。

通用底层能力可以用插件，比如图标、基础 UI、日期选择器。强业务组件别急着用插件，比如商品卡片、订单状态、优惠券规则。引入前要看维护状态、兼容版本、依赖、包体积、样式侵入和是否容易移除。

uni_modules 是什么

一个常见结构如下。

text 复制代码

my-uni-shop/
├─ uni_modules/
│  ├─ uni-icons/
│  │  ├─ components/
│  │  ├─ package.json
│  │  └─ readme.md
│  └─ uni-scss/
├─ pages/
├─ components/
└─ pages.json

uni_modules 里的模块可以包含：

组件。
JS/UTS SDK。
页面模板。
static 静态资源。
uniCloud 云函数和公共模块。
插件说明、版本和依赖配置。

它更像 uni-app 世界里的包管理目录。
#mermaid-svg-khKYpVV8uOGqQlLg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-khKYpVV8uOGqQlLg .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-khKYpVV8uOGqQlLg .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-khKYpVV8uOGqQlLg .error-icon{fill:#552222;}#mermaid-svg-khKYpVV8uOGqQlLg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-khKYpVV8uOGqQlLg .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-khKYpVV8uOGqQlLg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-khKYpVV8uOGqQlLg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-khKYpVV8uOGqQlLg .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-khKYpVV8uOGqQlLg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-khKYpVV8uOGqQlLg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-khKYpVV8uOGqQlLg .marker{fill:#333333;stroke:#333333;}#mermaid-svg-khKYpVV8uOGqQlLg .marker.cross{stroke:#333333;}#mermaid-svg-khKYpVV8uOGqQlLg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-khKYpVV8uOGqQlLg p{margin:0;}#mermaid-svg-khKYpVV8uOGqQlLg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-khKYpVV8uOGqQlLg .cluster-label text{fill:#333;}#mermaid-svg-khKYpVV8uOGqQlLg .cluster-label span{color:#333;}#mermaid-svg-khKYpVV8uOGqQlLg .cluster-label span p{background-color:transparent;}#mermaid-svg-khKYpVV8uOGqQlLg .label text,#mermaid-svg-khKYpVV8uOGqQlLg span{fill:#333;color:#333;}#mermaid-svg-khKYpVV8uOGqQlLg .node rect,#mermaid-svg-khKYpVV8uOGqQlLg .node circle,#mermaid-svg-khKYpVV8uOGqQlLg .node ellipse,#mermaid-svg-khKYpVV8uOGqQlLg .node polygon,#mermaid-svg-khKYpVV8uOGqQlLg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-khKYpVV8uOGqQlLg .rough-node .label text,#mermaid-svg-khKYpVV8uOGqQlLg .node .label text,#mermaid-svg-khKYpVV8uOGqQlLg .image-shape .label,#mermaid-svg-khKYpVV8uOGqQlLg .icon-shape .label{text-anchor:middle;}#mermaid-svg-khKYpVV8uOGqQlLg .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-khKYpVV8uOGqQlLg .rough-node .label,#mermaid-svg-khKYpVV8uOGqQlLg .node .label,#mermaid-svg-khKYpVV8uOGqQlLg .image-shape .label,#mermaid-svg-khKYpVV8uOGqQlLg .icon-shape .label{text-align:center;}#mermaid-svg-khKYpVV8uOGqQlLg .node.clickable{cursor:pointer;}#mermaid-svg-khKYpVV8uOGqQlLg .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-khKYpVV8uOGqQlLg .arrowheadPath{fill:#333333;}#mermaid-svg-khKYpVV8uOGqQlLg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-khKYpVV8uOGqQlLg .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-khKYpVV8uOGqQlLg .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-khKYpVV8uOGqQlLg .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-khKYpVV8uOGqQlLg .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-khKYpVV8uOGqQlLg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-khKYpVV8uOGqQlLg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-khKYpVV8uOGqQlLg .cluster text{fill:#333;}#mermaid-svg-khKYpVV8uOGqQlLg .cluster span{color:#333;}#mermaid-svg-khKYpVV8uOGqQlLg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-khKYpVV8uOGqQlLg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-khKYpVV8uOGqQlLg rect.text{fill:none;stroke-width:0;}#mermaid-svg-khKYpVV8uOGqQlLg .icon-shape,#mermaid-svg-khKYpVV8uOGqQlLg .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-khKYpVV8uOGqQlLg .icon-shape p,#mermaid-svg-khKYpVV8uOGqQlLg .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-khKYpVV8uOGqQlLg .icon-shape .label rect,#mermaid-svg-khKYpVV8uOGqQlLg .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-khKYpVV8uOGqQlLg .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-khKYpVV8uOGqQlLg .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-khKYpVV8uOGqQlLg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} uni_modules 插件
components 组件
js_sdk / utssdk
pages 页面模板
static 静态资源
uniCloud 云端资源
package.json 插件信息

用 uni-icons 举个例子

比如你想在按钮里放一个首页图标。

安装 uni-icons 后，插件大概率会出现在：

text 复制代码

uni_modules/
└─ uni-icons/
   ├─ components/
   │  └─ uni-icons/
   │     └─ uni-icons.vue
   └─ package.json

如果组件符合 easycom 约定，页面里可以直接使用。

vue 复制代码

<template>
  <view class="entry">
    <uni-icons type="home" size="24" />
    <text>首页</text>
  </view>
</template>

不用每个页面都手动 import。

这就是 uni_modules + easycom 对组件使用的便利。

什么时候适合用插件

适合插件的能力，通常有三个特点。

它很通用。

它跟你的业务规则关系不深。

自己写成本明显更高。

比如：

图标库。
日期选择器。
基础弹窗。
表单校验库。
通用图表组件。

不太适合直接交给插件的：

商品卡片。
订单状态。
优惠券规则。
会员权益展示。
你项目里变化很频繁的业务组件。

这些东西看起来像 UI，其实是业务规则。插件不理解你的业务。

插件引入前，先过一张表

检查项	要问的问题
维护状态	最近有没有更新，issue 是否长期无人处理
兼容版本	支持 Vue2 还是 Vue3，支持哪些平台
依赖关系	是否还依赖其他 uni_modules 或 npm 包
样式侵入	是否大面积覆盖全局样式
包体积	是否引入大量无关资源
文档质量	是否有清晰示例和参数说明
可移除性	不用了能不能干净删掉
业务耦合	是否承载你自己的业务规则

可以画成一个决策树。
#mermaid-svg-xCeZbmbjHUE4GCbu{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-xCeZbmbjHUE4GCbu .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-xCeZbmbjHUE4GCbu .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-xCeZbmbjHUE4GCbu .error-icon{fill:#552222;}#mermaid-svg-xCeZbmbjHUE4GCbu .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-xCeZbmbjHUE4GCbu .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-xCeZbmbjHUE4GCbu .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-xCeZbmbjHUE4GCbu .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-xCeZbmbjHUE4GCbu .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-xCeZbmbjHUE4GCbu .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-xCeZbmbjHUE4GCbu .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-xCeZbmbjHUE4GCbu .marker{fill:#333333;stroke:#333333;}#mermaid-svg-xCeZbmbjHUE4GCbu .marker.cross{stroke:#333333;}#mermaid-svg-xCeZbmbjHUE4GCbu svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-xCeZbmbjHUE4GCbu p{margin:0;}#mermaid-svg-xCeZbmbjHUE4GCbu .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-xCeZbmbjHUE4GCbu .cluster-label text{fill:#333;}#mermaid-svg-xCeZbmbjHUE4GCbu .cluster-label span{color:#333;}#mermaid-svg-xCeZbmbjHUE4GCbu .cluster-label span p{background-color:transparent;}#mermaid-svg-xCeZbmbjHUE4GCbu .label text,#mermaid-svg-xCeZbmbjHUE4GCbu span{fill:#333;color:#333;}#mermaid-svg-xCeZbmbjHUE4GCbu .node rect,#mermaid-svg-xCeZbmbjHUE4GCbu .node circle,#mermaid-svg-xCeZbmbjHUE4GCbu .node ellipse,#mermaid-svg-xCeZbmbjHUE4GCbu .node polygon,#mermaid-svg-xCeZbmbjHUE4GCbu .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-xCeZbmbjHUE4GCbu .rough-node .label text,#mermaid-svg-xCeZbmbjHUE4GCbu .node .label text,#mermaid-svg-xCeZbmbjHUE4GCbu .image-shape .label,#mermaid-svg-xCeZbmbjHUE4GCbu .icon-shape .label{text-anchor:middle;}#mermaid-svg-xCeZbmbjHUE4GCbu .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-xCeZbmbjHUE4GCbu .rough-node .label,#mermaid-svg-xCeZbmbjHUE4GCbu .node .label,#mermaid-svg-xCeZbmbjHUE4GCbu .image-shape .label,#mermaid-svg-xCeZbmbjHUE4GCbu .icon-shape .label{text-align:center;}#mermaid-svg-xCeZbmbjHUE4GCbu .node.clickable{cursor:pointer;}#mermaid-svg-xCeZbmbjHUE4GCbu .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-xCeZbmbjHUE4GCbu .arrowheadPath{fill:#333333;}#mermaid-svg-xCeZbmbjHUE4GCbu .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-xCeZbmbjHUE4GCbu .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-xCeZbmbjHUE4GCbu .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-xCeZbmbjHUE4GCbu .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-xCeZbmbjHUE4GCbu .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-xCeZbmbjHUE4GCbu .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-xCeZbmbjHUE4GCbu .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-xCeZbmbjHUE4GCbu .cluster text{fill:#333;}#mermaid-svg-xCeZbmbjHUE4GCbu .cluster span{color:#333;}#mermaid-svg-xCeZbmbjHUE4GCbu div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-xCeZbmbjHUE4GCbu .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-xCeZbmbjHUE4GCbu rect.text{fill:none;stroke-width:0;}#mermaid-svg-xCeZbmbjHUE4GCbu .icon-shape,#mermaid-svg-xCeZbmbjHUE4GCbu .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-xCeZbmbjHUE4GCbu .icon-shape p,#mermaid-svg-xCeZbmbjHUE4GCbu .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-xCeZbmbjHUE4GCbu .icon-shape .label rect,#mermaid-svg-xCeZbmbjHUE4GCbu .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-xCeZbmbjHUE4GCbu .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-xCeZbmbjHUE4GCbu .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-xCeZbmbjHUE4GCbu :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 否
是
否
是
否
是
想引入插件
是否通用能力
优先自己写业务组件
维护和兼容是否可靠
样式和依赖是否可控
可以引入插件

插件目录也有边界

uni_modules 插件目录支持很多东西，但不是项目根目录。

它通常不应该直接包含这些让使用者替换的文件：

pages.json
App.vue
main.js
manifest.json
uni.scss

如果插件确实需要使用者改这些文件，应该在插件文档里说明。

页面类插件可以通过 pages_init.json 辅助把页面注册到项目 pages.json，但这属于插件安装过程，不是你随手复制一个页面就完事。

更新和卸载也要考虑

插件不是装完就结束。

更新前要看 changelog。

更新后要跑核心页面。

不用时要确认能否删除对应目录、依赖和配置。

如果插件改了全局样式，卸载时更要小心。很多"删了插件页面样式全乱"的问题，根就在这里。

这里容易翻车

把 uni_modules 当 components

它不只是组件目录，还有依赖、插件信息、页面、云函数等结构。

业务组件全靠插件拼

短期快，长期会被样式和规则绑住。

不看兼容平台

H5 能用，不代表小程序或 App 能用。

插件改了全局样式

引入前先看文档和源码结构，确认侵入性。

自己试试

找一个图标插件，记录它安装后 uni_modules 目录新增了哪些文件。
用检查表评估一次：这个插件适合做通用能力，还是应该自己写业务组件。

参考资料

uni_modules 文档：https://uniapp.dcloud.net.cn/plugin/uni_modules.html
DCloud 插件市场：https://ext.dcloud.net.cn/
easycom 文档：https://uniapp.dcloud.net.cn/collocation/pages.html#easycom