宿州网站公司,济南网站的公司哪家好,机械设备行业网站建设,网站规划建设与管理维护教程与实训小知识#xff0c;大挑战#xff01;本文正在参与“程序员必备小知识”创作活动。
本文同时参与 「掘力星计划」#xff0c;赢取创作大礼包#xff0c;挑战创作激励金
当你想在小程序里引入vant时#xff0c;第一步#xff1a;打开官方文档#xff0c;第二步#xff…小知识大挑战本文正在参与“程序员必备小知识”创作活动。
本文同时参与 「掘力星计划」赢取创作大礼包挑战创作激励金
当你想在小程序里引入vant时第一步打开官方文档第二步切到快速上手然后开始步骤一、步骤二、步骤三 你只会看到 --------------------------以下是正文-------------------------
如果正准备安装可以直接跳到下面的【正确的安装姿势】一步一步走就不会出现问题啦
问题汇总
可能出现的一些问题汇总
问题一构建npm提示找不到package.json文件
按官网步骤一通过npm安装这个时候还没问题但是当你到第四步点击【构建npm】时就可能出现 所以在npm安装时先确保package.json存在不存在的话先npm init初始化一下项目。新建小程序默认是没有package.json文件的嗯反正我的没有
问题二构建npm未找到miniprogram文件
有package.json文件之后再次点击【构建npm】又提示 如果出现未找到miniprogram的情况则自行在根目录创建miniprogram解决这个问题。
问题三构建npm成功但是miniprogram里没东西 如果是先npm安装了发现没有package.json再进行创建的话package.json里并没有你的依赖信息所以构建为空。 重新执行npm i vant/weapp -S --production在点击构建即可 问题四引入报错
以为终于安装完可以开始用了但是.....还是报错 按照快速上手的方法引入组件时会出现此路径错误 官网是这样 我们需要改成 css
复制代码
usingComponents: { van-button: /miniprogram/miniprogram_npm/vant/weapp/button/index }
好了终于用上了。 正确的安装姿势
我们根据以上错误分析结合官网步骤来解锁正确的安装姿势 第一步创建小程序 当前的目录文件是这样的 第二步先执行 csharp
复制代码
npm init
生成package.json文件我做测试就直接一直回车了这个可根据自己需求配置 第三步通过npm安装官网步骤一 css
复制代码
npm i vant/weapp -S --production 第四步 修改 app.json官网步骤二
将 app.json 中的 style: v2 去除小程序的新版基础组件强行加上了许多样式难以覆盖不关闭将造成部分组件样式混乱。 第五步修改 project.config.json官网步骤三
开发者工具创建的项目miniprogramRoot 默认为 miniprogrampackage.json 在其外部npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置使开发者工具可以正确索引到 npm 依赖的位置。 json
复制代码
{ ... setting: { ... packNpmManually: true, packNpmRelationList: [ { packageJsonPath: ./package.json, miniprogramNpmDistDir: ./miniprogram/ } ] } } 注意 由于目前新版开发者工具创建的小程序目录文件结构问题npm构建的文件目录为miniprogram_npm并且开发工具会默认在当前目录下创建miniprogram_npm的文件名所以新版本的miniprogramNpmDistDir配置为./即可 第六步在根目录新增miniprogram文件夹 第七步构建npm包官网步骤四 构建完成之后你会在miniprogram文件看到vant的文件夹这样代表安装成功可以开始使用了。 第八步引入使用
在app.json或index.json中引入组件 css
复制代码
usingComponents: { van-button: /miniprogram/miniprogram_npm/vant/weapp/button/index } 然后在wxml就可以开始使用了 结语
如果现在不需要使用那就赶紧收藏一下万一之后就要用了呢 最后再教大家一个小技巧看图片对就是头像旁边的那个小手点一下 作者Axjy 链接https://juejin.cn/post/7011742207073845278 来源稀土掘金 著作权归作者所有。商业转载请联系作者获得授权非商业转载请注明出处。
