【微信小程序】使用npm安装Vant Weapp组件库-傻瓜式教程(最新微信开发工具)

发布于:2023-07-27 ⋅ 阅读:(253) ⋅ 点赞:(0)
  1. Vant Weapp组件库官方手册
    https://youzan.github.io/vant-weapp/#/quickstart
  2. 首先确保本机已有npm环境,如没有安装,自行百度
    https://jingyan.baidu.com/article/e4511cf38c05092b845eaf9b.html
  3. 安装成功之后出现以下说明安装成功
    在这里插入图片描述
  4. 打开微信开发工具新建一个demo测试小程序
    在这里插入图片描述
  5. 新建一个demo页面方便测试在这里插入图片描述
  6. 打开调试器,选择终端 ,点击新建终端在这里插入图片描述
  7. 新建完成后光标一直末尾 输入命令 npm init 并回车
npm init 

在这里插入图片描述
7. 一路回车即可直到出现 Is this OK? 输入 yes 并回车
在这里插入图片描述
在这里插入图片描述
8. 打开目录 project.config.json 文件 修改 packNpmManually 为 true ,packNpmRelationList 并添加对象数值

    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ],

在这里插入图片描述
9. 打开目录 package.json 文件 添加 private 属性 为 true ,

 "license": "ISC",
 "private": true
  1. 点击终端 输入命令 npm install 并回车
 npm install

在这里插入图片描述
11. 终端继续输入 命令 npm i @vant/weapp -S --production 并回车,(ps:也可以安装其他组件命令) 然后点击详情 勾选 构建npm模块

 npm i @vant/weapp -S --production 
  1. 点击上方工具菜单选择构建npm ,出现耗时xxx秒,点击完成
    在这里插入图片描述
    在这里插入图片描述
  2. 引入 Vant Weapp 组件测试 打开 demo.json 引入组件 ,demo.wxml 添加测试 按钮
"van-button": "@vant/weapp/button/index"
<van-button type="default">默认按钮</van-button>

在这里插入图片描述
在这里插入图片描述

恭喜!小程序引入 Vant Weapp 成功!


网站公告

今日签到

点亮在社区的每一天
去签到