当前位置:网站首页>微信小程序使用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"
去除,小程序的新版基础组件
强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
所以看个人情况,是否要删除这一句~
边栏推荐
- National technology n32g45x series about timer timing cycle calculation
- Directory of software
- F12抓包用于做postman接口测试的全过程解析
- Palindrome substring, palindrome subsequence
- 期末複習-PHP學習筆記5-PHP數組
- November 21, 2021 [reading notes] - bioinformatics and functional genomics (Chapter 5 advanced database search)
- Lodash filter collection using array of values
- Development technology sharing of Jingtan NFT digital collection system
- Program acceleration
- Deep learning - brnn and DRNN
猜你喜欢
回文子串、回文子序列
Tencent and Fudan University "2021-2022 yuan universe report" with 102 yuan universe collections
Construction of energy conservation supervision system for campus buildings of ankery University
深度学习——LSTM
Deloitte: investment management industry outlook in 2022
Armv8 (coretex-a53) debugging based on openocd and ft2232h
November 22, 2021 [reading notes] - bioinformatics and functional genomics (Section 5 of Chapter 5 uses a comparison tool similar to blast to quickly search genomic DNA)
Efga design open source framework fabulous series (I) establishment of development environment
期末複習-PHP學習筆記3-PHP流程控制語句
【花雕体验】12 搭建ESP32C3之Arduino开发环境
随机推荐
Deep learning -- sequence model and mathematical symbols
Conversion between basic data types in go data types
直击产业落地 | 飞桨重磅推出业界首个模型选型工具
深度学习——Bounding Box预测
2021-10-27 [WGS] pacbio third generation methylation modification process
Halcon12+vs2013 C # configuration
CRM能为企业带来哪些管理提升
December 4, 2021 [metagenome] - sorting out the progress of metagenome process construction
Self study notes -- use of 74h573
Construction of energy conservation supervision system for campus buildings of ankery University
Final review -php learning notes 5-php array
November 19, 2021 [reading notes] a summary of common problems of sneakemake (Part 2)
Basic theory of four elements and its application
Line fitting (least square method)
vulfocus入门靶机
Development technology sharing of Jingtan NFT digital collection system
July 30, 2021 [wgs/gwas] - whole genome analysis process (Part I)
Final review -php learning notes 4-php custom functions
Analysys analysis: online audio content consumption market analysis 2022
全栈最全性能测试理论-总结