在你小程序的根目录下cmd命令进入
1.初始化npm
终端输入npm init,回车,根据提示输入项目信息(其实一直回车就可以了,会自动输入默认信息),成功后会在项目下生成package.json文件。
2.接下来生成 package-lock.json
,记录使用的第三方插件:
npm install --production
使用 --production
选项,可以减少安装一些业务无关的 npm 包,从而减少整个小程序包的大小。
3.输入
npm i miniprogram-sm-crypto --production
4.勾选'使用npm模块'
5.工具-->构建npm
6.安装vant(参考https://vant-contrib.gitee.io/vant-weapp/#/quickstart#bu-zou-er-xiu-gai-app.json)
注:安装好以后,先构建npm,生成miniprogram_npm文件夹
npm i @vant/weapp -S --production
7.修改 app.json
将 app.json 中的 "style": "v2"
去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
8.修改 project.config.json
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
}
}
9.使用vant(先引入组件)在app.json中写
"usingComponents": {
"van-button": "@vant/weapp/button/index"
},
10.引入组件后,可以在 wxml 中直接使用组件
<van-button type="primary">按钮</van-button>