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运行效果
相关推荐
猫头虎-前端技术10 分钟前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫10 分钟前
探索 CSS 过渡:打造流畅网页交互体验
前端·css
元亓亓亓10 分钟前
JavaWeb--day1--HTML&CSS
前端·css·html
β添砖java11 分钟前
CSS的文本样式
前端·css
前端小趴菜0511 分钟前
css - 滤镜
前端·css
祈祷苍天赐我java之术11 分钟前
理解 CSS 浮动技术
前端·css
索迪迈科技13 分钟前
Flex布局——详解
前端·html·css3·html5
咔咔一顿操作15 分钟前
【CSS 3D 实战】从零实现旋转立方体:理解 3D 空间的核心原理
前端·css·3d·css3
DONG91317 分钟前
深度解析CSS单位与媒体查询:构建现代化响应式布局的核心技术
前端·css·html·css3·媒体
一只小风华~23 分钟前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架