所有操作都基于小程序根目录
第一步 初始化
初始化小程序,生成package.json文件
npm init
//或者直接生成默认package.json文件
npm init -f
第二步 下载npm包
npm i 相应npm包
npm i @vant/weapp -S --production
第三步 构建使用
小程序开发者工具-详情-本地设置-使用npm模块
小程序开发者工具-工具-构建npm
第一次构建npm之后会在目录下生成miniprogram_npm
,可以看做是将node_modules
中的组件打包到miniprogram_npm
,
需要注意的是:每次npm新的npm包都需要在开发者工具中构建npm,否则新的npm包只会存在于node_modules
,而miniprogram_npm
中没有该包,则无法在小程序中使用
第四步 引用
- 引用组件类型
以 Button 组件为例,只需要在app.json或index.json中配置 Button 对应的路径即可。如果你是通过下载源代码的方式使用 @vant/weapp,请将路径修改为项目中 @vant/weapp 所在的目录。
// 通过 npm 安装
// app.json
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
// 通过下载源码使用 es6版本
// app.json
"usingComponents": {
"van-button": "path/to/@vant/weapp/dist/button/index"
}
// 通过下载源码使用 es5版本
// app.json
"usingComponents": {
"van-button": "path/to/@vant/weapp/lib/button/index"
}
需要使用组件的wxml文件
<van-button type="primary">按钮</van-button>
- 引用js类型
以dayjs为例,不再需要在app.json或者其他json中配置,直接在相应页面js文件require引用即可
- 下载
npm i dayjs -S --production
- 构建
- 使用
//例如在user.js中使用
const dayjs = require('dayjs');
console.log(999,dayjs().format());//999 "2020-09-09T10:27:05+08:00"
小程序中npm i 时候这个production是什么用处,本地测试不加也没有影响,正式环境没有进行测试