1 打开微信小程序终端 输入
npm init
此时你会发现你的目录多出了package.json文件
605f8470f92945feb9e8c94f131e8279.jpg
2.安装依赖
2.1 通过 npm 安装vant/weapp
npm i @vant/weapp -S --production
2.2 安装 miniprogram
npm i miniprogram-sm-crypto --production
安装完毕后，你会发现你的目录中又多些文件。
f784d9c36bee45eeab737f1a07d93450.jpg
2.3 修改 app.json
将 app.json 中的 "style": "v2" 去除，原因是小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
2.4 修改 project.config.json
开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./../你的项目名"
}
]
}
}
2.5 构建 npm 我们点击左上角的工具栏
b050c5f1bc0b430ab1ff2f8807730ff5.jpg
构建成功后会出现下面的画面
b5beaf5dce94434d895b1d8b64043091.jpg
2.6然后点击右上角的详情---本地设置----使用npm模块
18deda34346349a1bf16766a0099103c.jpg
3.使用组件
我这里在全局里面注册一个按钮，然后使用它。先去app.json中注册
9b3c2b41ae4e450c95e2d113b97a5c11.jpg
找一个页面用一下这个按钮组件
微信截图_20220523101320.png
