UniApp小程序使用vant引入vant weapp

HBuilder X里新建项目指路

HBuilderX新建项目

安装node.js指路

安装node.js

1.通过npm安装

查看npm环境

javascript 复制代码
//打开终端输入命令查看版本
npm -version
1.1.右键打开外部终端窗口
1.2.输入npm init -y命令
1.3.通过命令安装
javascript 复制代码
npm i @vant/weapp@1.3.3 -S --production
1.4.打开工具------构建npm
1.5.构建完成

构建完成之后会出现一个文件夹"minprogram_npm"

1.6.修改project.config.json

miniprogramRoot 默认为 miniprogram,package.json 在其外部,npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置

javascript 复制代码
"packNpmManually": true,
  "packNpmRelationList": [
    {
      "packageJsonPath": "./package.json",
      "miniprogramNpmDistDir": "./miniprogram/"
    }
  ]

2. 测试一下

2.1.引入组件
javascript 复制代码
"usingComponents":{
    "van-button": "@vant/weapp/button/index"
}
2.2.使用button
javascript 复制代码
<van-button type="primary">确定</van-button>
2.3运行效果
相关推荐
刘新明198914 分钟前
算法还原案例4-OLLVM_MD5
开发语言·前端·javascript·1024程序员节
言德斐1 小时前
Python Web框架深度对比:Django vs Flask vs FastAPI(含优缺点与选型策略)
前端·python·django
疯狂的沙粒1 小时前
前端开发【工具函数】基于dayjs 封装的DateUtils工具函数,可以直接拿着使用
前端·javascript·vue.js·1024程序员节
jingling5551 小时前
CSS进阶 | 不用一行JS!用纯CSS打造会动的现代化单页应用(3D翻转卡片)
前端·javascript·css
温宇飞3 小时前
浏览器路由系统的一种实践
前端
老前端的功夫3 小时前
Vue 插槽深度解析:从基础到高级架构设计
前端
十五春会3 小时前
【uniapp】App平台展示pdf文件
pdf·uni-app
pre_lee3 小时前
vue2响应式原理
前端
小奶包他干奶奶3 小时前
如何使用vscode和express开发node.js
前端·node.js