初始化
1.第一步:创建项目
打开微信开发者工具,按照需求选择目录,输入申请的AppID,之后新建
2.第二步:npm初始化package.json文件夹
如果该项目中没有package.json文件,可以npm init -y
自动生成一个。
如果没有package.json文件夹,什么东西都没有办法安装成功哦~
3.第三步:按需引入想要引入的组件库
开发时,我想要使用vant组件库,根据官网提示,在小程序中安vant组件库npm i @vant/weapp -S --production
安装后会生成一个node_modules文件夹
4. 第四步:本地设置
在详情下面的本地设置中,勾选使用npm模块
5.第五步:构建npm
在工具下面点击npm构建生成miniprogram_npm文件夹
6.第六步:修改app.json
将 app.json 中的 “style”: “v2” 去除,小程序的新版基础组件强行加上了许多样式,难以去除,不关闭将造成部分组件样式混乱。
*报错问题:当我引入vant,构建npm,修改app.json后报错 VM176:1 miniprogram_npm/@vant/weapp/calendar/index.json: [“usingComponents”][“van-toast”]: “…/toast/index” 未找到
我这面重新构建一下npm,关闭项目重启后就解决了
7.第七步:按需使用组件库
如果你想要使用button这个组件,可以在app.json中引入该组件
之后在某个页面中使用
编译后,我们可以看到
留存记录,也希望可以帮助到你,加油,又是努力的一天~