依赖集成

uni-cli-test
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│ └── index.html
├── src
│ ├── App.vue
│ ├── main.js 引入组件库
│ ├── manifest.json
│ ├── pages 其他页面存放的位置
│ │ └── index
│ │ └── index.vue
│ ├── pages.json 页面路径
│ ├── static
│ │ └── logo.png
│ ├── uni.scss
│ └── uni_modules 依赖组件库存放的位置
│ └── my-low-code 需要集成的组件库
│ ├── changelog.md
│ ├── components 组件库中各模块组件
│ │ ├── my-tab
│ │ │ └── my-tab.vue
│ │ └── my-table
│ │ └── my-table.vue
│ ├── index.js
│ ├── package.json
│ └── readme.md
├── tsconfig.json
└── yarn.lock

当前的项目结构 uni_modules 与pages分别对应是Apaas与业务组件的内容，两者之间相互独立，互不影响。
pages中没有引用uni_modules 中的组件，进行打包时，uni_modules中的组件不会被打包进去。


uni_modules

什么是 uni_modules

uni_modules是uni-app的插件模块化规范（HBuilderX 3.1.0+支持），通常是对一组js sdk、组件、页面、uniCloud云函数、公共模块等的封装，用于嵌入到uni-app项目中使用，也支持直接封装为项目模板。
插件开发者，可以像开发uni-app项目一样编写一个uni_modules插件

相对于普通的插件，uni_modules插件拥有更强的独立性，拥有独立的目录结构，可以更加方便的发布，更新，卸载

开发 uni_modules 插件

新建uni_modules目录

1.在uni-app项目根目录下，创建uni_modules目录，在HBuilderX中可以项目右键菜单中点击新建uni_modules目录

2.如果是vue-cli项目，uni_modules目录，位于src下，即src/uni_modules

新建uni_modules插件

  1. 在HBuilderX中uni_modules目录右键点击新建uni_modules插件

uni-app集成方案 - 图1

  1. 填写正确的插件ID，选择插件分类

uni-app集成方案 - 图2

插件ID命名规范：

  • 格式为：’作者ID-插件英文名称’，示例：’xx-yy’，其中作者ID和插件英文名称只能包含英文、数字
  • 作者ID由插件作者自定义，不能使用’DCloud’、’uni’等关键字，长度要求至少2位字符
  • 插件名称需直观表达插件的作用，例如：tag、button等

uni_modules插件可以在package.json的uni_modules->dependencies节点配置三方依赖（依赖的插件也必须是uni_modules插件），如果是依赖了三方的npm插件，可以使用标准的dependencies节点配置。

使用 uni_modules 插件

image.png
直接在项目的main.js中引入文件

image.png
在页面中直接使用就可以了

因为uni_modules遵循了easycom规范，所以可以直接使用uni_modules中的组件

easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。

不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。

组件库批量安装，随意使用，自动按需打包。以官方的uni-ui为例，在HBuilderX新建项目界面选择uni-ui项目模板，只需在页面中敲u，拉出大量组件代码块，直接选择，即可使用。大幅提升开发效率，降低使用门槛。