微信小程序引用vant-UI组件

1.用微信开发者工具搭建一个小程序

目录结构如图所示

2.引用vantUI组件

步骤一

# 通过 npm 安装

npm i @vant/weapp -S --production

# 通过 yarn 安装

yarn add @vant/weapp --production

# 安装 0.x 版本

npm i vant-weapp -S --production

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

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置

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

5.打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

vant官方网站也有教程我这就是从那贴过来的

https://vant-contrib.gitee.io/vant-weapp/#/quickstart#yin-ru-zu-jian

温馨提示：我发现我建设的项目没有package.json

大家可以手动添加到项目中

文件如下是package.json重的全部内容

{"name": "vant-weapp-demo","version": "1.0.0","description": "Collection of vant-weapp demos.","main": "app.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","dependencies": {"@vant/weapp": "^1.0.0"}
}

6.使用方法

比如在一个页面使用一个按钮或者一个弹出框

 <van-button type="primary" bind:click="onClick">默认按钮</van-button><van-toast id="van-toast" />

这个时候要在app.json中配置

 "usingComponents": {"van-button": "@vant/weapp/button/index","van-toast": "@vant/weapp/toast/index"},

在对应的页面中引入相应的组件

import Toast from '@vant/weapp/toast/toast';

用的时候，看着官方文档直接用就好了

Toast('我是提示文案，建议不超过十五字~');

微信小程序引用vant-UI组件相关推荐

微信小程序使用vant ui 组件库安装步骤
第1步:初始化npm npm init 然后一直回车,直到 package.json出现第2步:安装vant npm install @vant/weapp -S --production 第3步: ...
微信小程序引用vant toast 提示 “未找到 van-toast 节点“
微信小程序引用vant 的toast 出现如下报错都是因为没有正确引入toast 组件正确引入toast 组件需要在三个文件中设置在 .wxml 文件的 view 内写入 <van-toa ...
微信小程序引入 Vant UI
微信小程序引入 Vant UI 一. 安装 # 通过 npm 安装 npm i @vant/weapp -S --production# 通过 yarn 安装 yarn add @vant/weapp ...
微信小程序引入Vant UI
微信小程序引入Vant UI 第一次导入Vant UI时,照着vant weapp 官网给的"快速上手"文章做的,结果出了几大错误,改了半小时才解决.下面将完整演示引入流程. 1. ...
微信小程序导入Vant Weapp组件库
超详细!微信小程序导入Vant Weapp组件库 Vant Wepp组件库轻量.可靠,同时组件样式丰富美观,容易上手,我们可以引入该组件库来实现小程序的相关界面样式. Vant Weapp组件库官方文 ...
微信小程序引用vant Weapp
vant-weapp官网https://youzan.github.io/vant-weapp/#/quickstarthttps://youzan.github.io/vant-weapp/#/qu ...
微信小程序引用vant框架
1.在微信开发者工具中打开终端(视图-终端)输入 npm init (初始化)一直回车确认 2.vant 官网: Vant Weapp - 轻量.可靠的小程序 UI 组件库安装: # 通过 npm ...
微信小程序引入Vant UI步骤
官方文档教程 1.通过 npm 安装 # 通过 npm 安装 npm i @vant/weapp -S --production# 通过 yarn 安装 yarn add @vant/weapp -- ...
微信小程序使用@vant/weapp组件
打开微信小程序项目终端,如果根目录没有package.json文件,就先执行命令npm init -y 之后安装@vant/weapp组件,执行命令npm i @vant/weapp -S --pro ...
微信小程序引用Vant组件库message：没有找到可以构建的 NPM 包，请确认需要参与构建的 npm 都在 `miniprogramRoot` 目录内...
问题描述 message: 没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 `miniprogramRoot` 目录内,或配置 project.config.json 的 pack ...

微信小程序引用vant-UI组件

微信小程序引用vant-UI组件相关推荐

最新文章

热门文章