微信小程序使用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>
相关推荐
IT_陈寒18 分钟前
Vue3性能优化实战:这5个技巧让我的应用加载速度提升了70%
前端·人工智能·后端
树上有只程序猿19 分钟前
react 实现插槽slot功能
前端
stoneship42 分钟前
Web项目减少资源加载失败白屏问题
前端
DaMu1 小时前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员1 小时前
一文读懂Font文件
前端
Asort1 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer1 小时前
什么是 React 中的远程组件?
前端·react.js
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js
知了一笑1 小时前
「AI」网站模版,效果如何?
前端·后端·产品