前言:
1、初识微信小程序开发,此文章仅记录在实践过程中遇到的问题及对应的解决方式
2、安装过程是按照weapp开发指南中的步骤进行的
步骤:
1、通过npm 安装
npm i @vant/weapp -S --production
2、修改app.json
将app.json中的"style":"v2"去除,避免造成样式混乱
3、修改project.config.json文件
【按照文档添加packNmpManually,packNpMRelationList配置项,如已存在配置项,确保属性值 是正确的】此处miniprogramNpmDistDir的值和文档中不同
4、构建npm 【因为我的本地设置中没有 ‘使用npm模块’,所以省去了勾选的一步】
5、在app.json中全局配置组件
6、在页面中使用及效果
遇到问题:
1、npm init 初始化时报错 【左图是新建项目后的项目结构,右图是进行npm init 初始化后的项目结构和报错信息】(虽说报错了,但是结构中还是出现了package.lock.json文件),这里的错误没有影响,所以选择了继续往下进行
2、执行 npm i @vant/weapp -S --production 【执行完命令,项目结构中再次发生变化】
3、 执行【工具--构建npm】,执行构建npm后项目结构再次发生变化。注意:如果构建后是miniprogram_npm文件下是@vant文件夹,可以按照文档中的方式在app.json中引入全局挂载组件。如果是和右侧图片中展示的一样,需要把路径改为“vant-weapp/button/index”