【微信小程序】使用npm并引入vant-weapp组件库
0 前言
vant文档与微信小程序文档写得弯弯绕绕,你引用我,我引用你,还给出了多种不同情况下的选项,甚至有步骤缺失,导致踩了一点小坑,浪费了一些没必要的时间,这里给出完整可行的实现方法,以供参考。
1 逐步实现
1.1 创建微信小程序
首先,当然是先建一个微信小程序
1.2 npm init
新建一个终端,执行npm init
,进行npm初始化,会生成一个package.json
此条在官方文档中未说明
1.3 npm install
下载一下
1.4 引入vant-weapp
# 通过 npm 安装
npm i @vant/weapp -S --production
此条官方文档给出了多条选择
1.5 修改 app.json
打开app.json,删除"style": "v2"
1.6 修改 project.config.json
{..."setting": {..."packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./"}]}
}
此条官方文档在“注意”中说明了现在普遍使用的新版本配置方法
1.7 构建 npm 包
屏幕最顶栏菜单,菜单-工具-构建npm
1.8 引入vant具体组件
在app.json中引入具体组件,然后在pages中使用
该条请看vant官方文档
2 参考
vant weapp官方文档
微信小程序 官方文档
【微信小程序】使用npm并引入vant-weapp组件库相关推荐
- 【微信小程序】原生微信小程序ts模板下引入vant weapp
之前一直是在普通项目下使用 vant weapp,这不最近学了ts,使用微信开发工具的ts+less初始化项目,再引入 vant 时踩了好久坑,特来记录一下 前言 本文章适合微信开发工具的ts项目,指 ...
- 在微信小程序里引入Vant Weapp组件库详细步骤
1. 新建一个文件夹. 2. 使用微信开发者工具 选择一个模板(这里以javaScript 基础模板 为例) 选择完模板之后如下: 2. 右键打开终端:按如下步骤执行命令. ① npm init 解释 ...
- 小程序 | 使用 npm 模块配置 Vant Weapp 框架
之前体验了 iView 的UI框架,感觉还可以主要是因为在开发体验上比原生敲代码好很多,不过 iView 框架可利用的组件较少,比如搜索框的组件等并未涉及,而且已有的组件也存在一些需要自行生硬的修改才 ...
- 微信小程序导入Vant Weapp组件库
超详细!微信小程序导入Vant Weapp组件库 Vant Wepp组件库轻量.可靠,同时组件样式丰富美观,容易上手,我们可以引入该组件库来实现小程序的相关界面样式. Vant Weapp组件库官方文 ...
- 设置微信小程序支持npm(解决微信小程序npm构建时提示“没有找到可以构建的NPM包,请确认需要参与构建的npm都在miniprogramroot目录内,或配置project...”错误)的方法
提示:通过微信开发者工具创建小程序工程后,默认是不开启npm的,需要修改小程序npm配置参数,否则将会提示"没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 minipro ...
- 微信小程序的npm使用心得
研究小程序的npm没多久,也就是稍微花了点时间研究了下,并记录一下我的理解和心得,有疏漏的地方,望各位指教. 首先,这里介绍的只囊括了如何使用npm,以及小程序npm基本的模块加载原理(没有太深入), ...
- 微信小程序的启动和渲染过程(加组件分类和组件的基本使用以及API分类)
文章目录 导航路线 小程序的启动过程 小程序页面渲染的过程 小程序中组件的分类有九大类 常用的视图容器类组件 小程序宿主环境-API 导航路线 关于微信小程序知识点一共做了六个博客,涵盖大部分内容,有 ...
- 微信小程序下拉框插件_微信小程序自定义select下拉选项框组件的实现代码_清玖_前端开发者...
知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...
- 微信小程序—自定义(城市选择)弹窗组件,将弹窗组件的值传给调用页面并显示(图文)
微信小程序-自定义(城市选择)弹窗组件,并传值 1.新建component文件夹用来存放自定义组件,并在其文件夹内新建cityModal Component,注意不是新建Page 新建完成之后出现四个 ...
- 原生微信小程序,搜索框(search)组件
原生微信小程序,搜索框(search)组件 首先创建组件及两个跳转页面,第一个是搜索框所在的页面(首页),第二个是搜索详细页 搜索框的本质是:搜索框不是input,而是navigate,跳转到专门的搜 ...
最新文章
- 打印正方形和各种三角形
- OpenStack Ocata Release Notes
- paper 68 :MATLAB中取整函数(fix, floor, ceil, round)的使用
- shell 调用mysql 存储过程_shell调用mysql的存储过程以及SQL
- 后缀数组总结(转载)
- android xml png,android - 使用.png文件中的形状创建xml聊天气泡 - 堆栈内存溢出
- 一个aov网用邻接矩阵表示_关注讲述我和朱婷7年7个故事,见证一个明星代表的诞生...
- 数据库 文件 备份【学习 使用】
- vue-cli构建的项目手动添加eslint配置
- 老是原罪?技术圈为何不待见大龄企业家
- python基础系统性学习
- ASP.NET2.0缓存(Cache)技术
- Atitit java onvif 开源类库 getProfiles getStreamUri
- time模块时间格式转换及faker库数据伪造
- DDS产生双频正弦波及叠加
- AHU计科(伪)新生指南
- PMP项目进度网络图详解——第1篇:甘特图、PERT
- MQTT协议从服务端到客户端详解
- 使用Drupal Console,出现Failed to decode response: zlib_decode(): data error Retrying with degraded mode
- css背景图做水印,css给图片添加水印的方法