npm构建WeUI 拓展组件与引用

weui 给我们提供一套很棒的组件，它与微信原生视觉体验一致。很多业务场景下使用weui的组件开发速度快同时用户体验也很赞！
在使用扩展组件tabs 过程中遇到许多的问题，耽误不少时间~~真是要命呀。温馨提示：认真看官方文档才是正道。
进入正题

微信官方文档给了两种weui引入方式：

1、通过 useExtendedLib 扩展库 的方式引入，这种方式引入的组件将不会计入代码包大小。
2、可以通过npm方式下载构建
Tips:如果使用扩展组件的话必须使用npm的安装方式

1、npm原理介绍
这里特别需要注意的就是目录结构的问题，不然构建出来的文件难引用的到

完整的项目结构

1、在项目根目录下打开终端，微信开发者右键即可看见“在终端窗口打开”

2、初始化npm 让当前文件夹以node_modules模块化的方式引入组件，会询问你项目相关信息，一直回车就行。
终端输入： npm init
上面执行完，会在根目录下生成package.json

3、终端输入 npm i @miniprogram-component-plus/tabs --save
得到的项目结构如图，到这里目录结构已经完整了

4、配置project.config.json,同时使用npm模块
miniprogramNpmDistDir 构建输出的目录位置，相对于project.config.json 这里是项目的根目录

"packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ],

点击构建npm ，完成后会看见miniprogram_npm 目录


到这里构建完成~~~~~
使用时根据官方文档使用就行
如：两种方式都可以使用

效果图

相关文档
1、npm 支持
2、tabs使用
3、WeUI组件库