小程序-独立分包使用npm第三方(vant)组件库

需求：独立分包是经过扫码进入的，需要用到 vant 组件库，但是由于独立分包不能使用主包的资源，故要在独立分包里导入 vant 组件

第一步、在对应的独立分包中通过cmd窗口初始化

npm init -y

第二步、通过 npm 安装vant/weapp

npm i @vant/weapp -S --production

第三步、构建npm包

具体通过npm使用vant组件：

构建后的效果图

注意：当构建完的时候，独立分包没有多出 miniprogram_npm 文件
那就在独立分包下新增一个文件 project.config.json

第四步、使用组件

在独立分包页面的json下引入组件

{
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }
}

在页面使用组件

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

效果

最后关于报错问题

出现如下的报错

• 只需把当前独立分包没有使用到的组件删除就行，因为没有使用到的组件会自动被忽略，不影响使用
• 不过建议留着就好，反正代码上传时候回过滤掉这些无依赖代码文件