当前位置:网站首页>微信小程序使用vant weapp报错
微信小程序使用vant weapp报错
2022-06-30 07:57:00 【Dark_programmer】
微信小程序使用vant weapp报错
如果是按照【vant weapp】 来一步步走的,也许会遇到我遇到的错误。
我的踩坑,希望能够帮你解决问题。
错误一:构建错误
当按照vant weapp
快速上手的指引一步步走,到了步骤四 构建 npm 包
遇到了第一个坑。
这个报错其实是因为上一步配置packNpmRelationList
时的路径不准确的问题。
解决办法:
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./node_modules/"
}
]
如此即可构建成功
错误二:[“usingComponents”][“van-button”] 未找到
这是遇到的第二个坑,这个坑有点让人疑惑。明明是完全按照官方文档
来的,为什么
会出现问题呢?不信邪的我又前前后后重新创建了三四个小程序,重新走这个过程。无一例外,全部都是这个问题。
百度好久,google好久。看了好多相关文章,发现那些文章有一个共同点
:
npm 构建生成 miniprogram_npm
但是我仔细看了看我的小程序,确定没有这个文件
。为什么别人有,我却没有???是不是哪里出问题了???或者说流程颠倒
了???
想到这,准备参考
官方文档,然后适当的调整一下步骤流程。果然,成功了。
下面就是我安装使用成功的步骤。
我的安装流程
1. 重新创建项目
在创建项目这一步骤不再进行赘述
此时的目录结构
:
2. 初始化npm
前提是你已经安装了node
和npm
。
npm init -y
3. 安装插件
npm i @vant/weapp -S --production
4. 勾选npm & npm构建
注意:
如果有使用npm模块选项
,就进行勾选
,然后构建npm
如果没有也不用纠结
,直接构建npm
我这里就没有使用npm模块选项
这个选项
构建完成后,注意看项目的目录结构多了一个文件夹:
到了这,我们才有了别人有的文件夹。
5. 修改 project.config.json
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
}
}
6. 引入组件
如果发现报错Error: module "miniprogram_npm/@vant/weapp/common/component.js" is not defined
,不要紧张,刷新一下即可。
你可以选择在app.json
引入,也可以在指定组件的json文件
里进行引入
我是在app.json
里引入:
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
7. 使用组件
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
8. “style”: “v2”
在 vant weapp官方文档给了这么一句:
将 app.json 中的
"style": "v2"
去除,小程序的新版基础组件
强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
所以看个人情况,是否要删除这一句~
边栏推荐
- Deep learning - embedding matrix and learning word embedding andword2vec
- 25岁,从天坑行业提桶跑路,在经历千辛万苦转行程序员,属于我的春天终于来了
- November 9, 2020 [wgs/gwas] - whole genome analysis (association analysis) process (Part 2)
- Deep learning - residual networks resnets
- 深度学习——Bounding Box预测
- Investment and financing analysis report of Supply Chain & logistics industry in 2021
- Fishingprince Plays with Array
- 【花雕体验】12 搭建ESP32C3之Arduino开发环境
- 深度学习——残差网络ResNets
- December 4, 2021 - Introduction to macro genome analysis process tools
猜你喜欢
Global digital industry strategy and policy observation in 2021 (China Academy of ICT)
Deep learning -- sequence model and mathematical symbols
F12抓包用于做postman接口测试的全过程解析
24C02
National technology n32g45x series about timer timing cycle calculation
Analysis of cross clock transmission in tinyriscv
Cadence physical library lef file syntax learning [continuous update]
CRM&PM如何帮助企业创造最优销售绩效
深度学习——卷积的滑动窗口实现
Network security and data in 2021: collection of new compliance review articles (215 pages)
随机推荐
深度学习——残差网络ResNets
ACM. Hj48 delete the node with the specified value from the one-way linked list ●●
深度学习——词汇表征
Bingbing learning notes: quick sorting
Why don't you know what to do after graduation from university?
JS code case
MySQL cannot connect to the intranet database
Recurrence relation (difference equation) -- Hanoi problem
Deloitte: investment management industry outlook in 2022
深度学习——LSTM
深度学习——序列模型and数学符号
1163 Dijkstra Sequence
Efga design open source framework openlane series (I) development environment construction
Lodash filter collection using array of values
Deep learning -- sequence model and mathematical symbols
Use of nested loops and output instances
Given a fixed point and a straight line, find the normal equation of the straight line passing through the point
At the age of 25, I started to work in the Tiankeng industry with buckets. After going through a lot of hardships to become a programmer, my spring finally came
Permutation and combination of probability
Program acceleration