uniapp 手动导入插件组件的方法

其实我的需示很明确：

1. 我的uniapp项目需要引入微信小程序的原生插件
2. 我的Uni-app项目需要引入uniapp官网的插件市场及成熟的uniapp组件包

uniapp项目一般是用Hbuildx自动导入插件/组件的，那如果用的vscode来开发项目时要引入插件/组件就不方便了。
更别提像我就算装了Mac版的Hbuildx，但安装插件/组件时还是不知所去。找了很久手动导入插件的方法，在网上找了很久没有一篇说到点上的文章，特地实验后来写此文了。

首先，我们要明白我当前要安装的目标到底是什么？
是插件？还是组件？
还是页面模板？还是项目模板？
但是，由于官方的分类比较模糊，我们很多时候甚至都不清楚自己需要安装的是啥。
所以这里请小伙伴们对照看一看此文就会清楚的：
https://ask.dcloud.net.cn/article/35408

然后依据你的需求，按照此文档上描述的项目目录来放置和引入你从官方上下载回来的插件包即可。

关于uni_modules这个文件夹的意义有点乱，官方介绍是从HBuilderX 3.1起，新增 uni_modules，它是uni生态的重要模块化方案，通常是对js sdk、组件、页面、uniCloud云函数、公共模块等的封装，用于嵌入到uni-app项目中使用，也支持直接封装为项目模板。

但是经过本人费了很大工夫后了解来看，这个目录是官方为了它的大插件生态而单独使用的一个目录，方便的是官方的在线插件管理和卸载，但对于我们个人手动来使用的话还是很懵逼，所以，如果你是要手工管理组件的话不建议使用此目录。

具体详情可见：https://uniapp.dcloud.net.cn/uni_modules

uni-app工程如何引入组件？

引入小程序原生专用的组件

│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件

引入Uni-app规范的组件

├─uni_modules 存放uni_module规范的插件。
├─wxcomponents 存放小程序组件的目录，具体更多详情 详见

uniapp组件相关规范更多如下：

https://ask.dcloud.net.cn/article/35408

目录结构具体参看：

https://uniapp.dcloud.io/tutorial/project.html#%E5%B7%A5%E7%A8%8B%E7%AE%80%E4%BB%8B

另附：Uni-app微信小程序项目的目录结构

https://uniapp.dcloud.io/tutorial/project.html#%E5%B7%A5%E7%A8%8B%E7%AE%80%E4%BB%8B
一个uni-app工程，默认包含如下目录及文件：

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见[uniCloud](https://uniapp.dcloud.io/uniCloud/quickstart?structure&id=structure)）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录，[详见](https://uniapp.dcloud.io/component/web-view)
├─platforms             存放各平台专用页面的目录，[详见](https://uniapp.dcloud.io/tutorial/platform?id=%E6%95%B4%E4%BD%93%E7%9B%AE%E5%BD%95%E6%9D%A1%E4%BB%B6%E7%BC%96%E8%AF%91)
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，**注意：**静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents          存放小程序组件的目录，[详见](https://uniapp.dcloud.io/tutorial/miniprogram-subject?id=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81)
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 [应用生命周期](https://uniapp.dcloud.io/collocation/App#%E5%BA%94%E7%94%A8%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F)
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，[详见](https://uniapp.dcloud.io/collocation/manifest)
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，[详见](https://uniapp.dcloud.io/collocation/pages)
└─uni.scss              这里是uni-app内置的常用样式变量` 

Tips

• 编译到任意平台时，static 目录下的文件均会被完整打包进去，且不会编译。非 static 目录下的文件（vue、js、css 等）只有被引用到才会被打包编译进去。
• static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
• css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下。
• HbuilderX 1.9.0+ 支持在根目录创建 ext.json、sitemap.json 等小程序需要的文件。

另外，关于插件的几个名词解释：

HBuilderX插件

HBuilderX插件是安装在HBuilderX工具里的。是编辑器的插件，不是手机App的插件。详细开发教程见：http://hx.dcloud.net.cn/