npm

chanchaw大约 1 分钟mini

概述

小程序也支持使用 npm 安装第三方依赖，不过安装后不可直接使用，要在小程序的IDE中编译后才可使用

使用 npm 初始化项目（得到 package.json）.在项目根目录下执行命令 npm init -y （在 cmd 中执行），再执行 npm install
执行命令 npm i @vant/weapp 安装 weapp （以安装该第三方依赖为例子说明）
点击IDE菜单栏的：工具 > 构建npm。如果报错：
message： NPM packages not found. Please confirm npm packages which need to build are belong to miniprogramRoot directory. Or you may edit project.config.json's packNpmManually and packNpmRelationList appid: wxf23fe29ef6ac21a7 openid: o6zAJs_m0FjHf4CkeI-IUhmTyYMI ideVersion: 1.06.2407120 osType: win32-x64 time: 2024-09-06 21:09:29

则需要在 project.config.json 中的 setting 下面手动添加关于 npm 包的的本地路径（或者将 packNpmRelationList 后面使用空数组）

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

重启项目后再次：工具 > 构建npm。构建成功后会在项目根目录下的 miniprogram 下创建目录 miniprogram_npm，其中存放了构建完成的可用于小程序的依赖
注意在 app.json 中有个属性 style:'v2' 表示使用最新版本的微信UI，这里会和 vantUI 冲突，要删除该属性
使用 vatn-weapp 的组件 image 首先要在 app.json 中全局注册该组件
```
  "usingComponents": {
    "van-image": "@vant/weapp/image/index"
  },
```
然后在业务组件中如下使用，这里要注意，本地路径的图片不可使用相对路径，要使用从源码根路径（项目根目录下的 miniprogram 是源码根目录）开始的路径，assets 是在源码根路径下的
```
<van-image width="100" height="100" src="/assets/images/girl-friend.png"></van-image>
```

npm

# 概述

概述