微信小程序使用Vant Weapp(最新版)

一、初始化

1.右键选择资源管理器显示

2.进入终端

3.打开终端

4.初始化命令

csharp 复制代码
npm init
  • 目录出现package.json文件,即为引入成功

二、安装依赖

1. 通过 npm 安装vant/weapp

css 复制代码
npm i @vant/weapp -S --production

2. 安装 miniprogram

css 复制代码
npm i miniprogram-sm-crypto --production

出现下述内容,即为安装成功

3. 修改 app.json

  • app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

4. 修改 project.config.json

  • 开发者工具创建的项目,miniprogramRoot 默认为 miniprogram,package.json 在其外部,npm 构建无法正常工作。
  • 需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。
  • 此处修改注意层级与属性,是在setting对象中,packNpmRelationList中两个属性为数组包裹对象的形式
json 复制代码
{
  "setting": {
    "packNpmManually": false,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

5.构建npm

  • 左上角-工具-构建npm
  • 构建成功弹出如下

6.使用npm模块

  • 注意:最新版的微信开发者工具没有【使用npm模块】选项,可以直接使用
  • 如果有【使用npm模块】选项,则勾选,具体图例如下:
  • 右上角详情---本地设置----使用npm模块

三、使用组件

  • 分为全局注册与按需引入两种,任选其一,各有优劣

1. 注册组件(二选一)

全局注册,在app.json中注册 按需引入,在要使用的当前页面文件的。json文件中注册

css 复制代码
"usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }

2.页面首页

注册后任意页面的wxml中直接使用即可

bash 复制代码
<van-button type="info">信息按钮</van-button>
相关推荐
come1123413 分钟前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
musk12121 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少2 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL2 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl022 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang2 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿2 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5552 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架