文章目录

第一步，HBuilder X中新建一个uni-app的项目
第二步，HBuilder X提示项目创建成功，在HBuilder X用命令行窗口打开创建的项目（或直接在创建的项目文件夹内用cmd指令打开）
第三步，输入npm init -y 指令，创建项目配置文件（即package.json）；
第四步，输入**npm i @vant/weapp -S --production**下载vant
第五步，在项目的根路径下，创建wxcomponents目录，并将依赖项（node_modules）中@vant文件夹下的dist复制到wxcomponents，并修改文件夹名为vant;
第六步，在pages.json中注册并引入组件
如此，即完成了Vant组件库的引入！

第一步，HBuilder X中新建一个uni-app的项目

1、添加项目名称，选择文件路径
2、选择默认模板
3、Vue版本选择（若无其他需求，点击创建即可）

第二步，HBuilder X提示项目创建成功，在HBuilder X用命令行窗口打开创建的项目（或直接在创建的项目文件夹内用cmd指令打开）

第三步，输入npm init -y 指令，创建项目配置文件（即package.json）；

第四步，输入npm i @vant/weapp -S --production下载vant

安装完成后，项目中会多出一个依赖项，也代表安装成功

第五步，在项目的根路径下，创建wxcomponents目录，并将依赖项（node_modules）中@vant文件夹下的dist复制到wxcomponents，并修改文件夹名为vant;

第六步，在pages.json中注册并引入组件

以下为组件的全局注册，可根据需求按需导入组件：

"usingComponents": {"van-action-sheet": "/wxcomponents/vant/action-sheet/index","van-area": "/wxcomponents/vant/area/index","van-button": "/wxcomponents/vant/button/index","van-card": "/wxcomponents/vant/card/index","van-cell": "/wxcomponents/vant/cell/index","van-cell-group": "/wxcomponents/vant/cell-group/index","van-checkbox": "/wxcomponents/vant/checkbox/index","van-checkbox-group": "/wxcomponents/vant/checkbox-group/index","van-col": "/wxcomponents/vant/col/index","van-dialog": "/wxcomponents/vant/dialog/index","van-field": "/wxcomponents/vant/field/index","van-goods-action": "/wxcomponents/vant/goods-action/index","van-goods-action-icon": "/wxcomponents/vant/goods-action-icon/index","van-goods-action-button": "/wxcomponents/vant/goods-action-button/index","van-icon": "/wxcomponents/vant/icon/index","van-loading": "/wxcomponents/vant/loading/index","van-nav-bar": "/wxcomponents/vant/nav-bar/index","van-notice-bar": "/wxcomponents/vant/notice-bar/index","van-notify": "/wxcomponents/vant/notify/index","van-panel": "/wxcomponents/vant/panel/index","van-popup": "/wxcomponents/vant/popup/index","van-progress": "/wxcomponents/vant/progress/index","van-radio": "/wxcomponents/vant/radio/index","van-radio-group": "/wxcomponents/vant/radio-group/index","van-row": "/wxcomponents/vant/row/index","van-search": "/wxcomponents/vant/search/index","van-slider": "/wxcomponents/vant/slider/index","van-stepper": "/wxcomponents/vant/stepper/index","van-steps": "/wxcomponents/vant/steps/index","van-submit-bar": "/wxcomponents/vant/submit-bar/index","van-swipe-cell": "/wxcomponents/vant/swipe-cell/index","van-switch": "/wxcomponents/vant/switch/index","van-tab": "/wxcomponents/vant/tab/index","van-tabs": "/wxcomponents/vant/tabs/index","van-tabbar": "/wxcomponents/vant/tabbar/index","van-tabbar-item": "/wxcomponents/vant/tabbar-item/index","van-tag": "/wxcomponents/vant/tag/index","van-toast": "/wxcomponents/vant/toast/index","van-transition": "/wxcomponents/vant/transition/index","van-tree-select": "/wxcomponents/vant/tree-select/index","van-datetime-picker": "/wxcomponents/vant/datetime-picker/index","van-rate": "/wxcomponents/vant/rate/index","van-collapse": "/wxcomponents/vant/collapse/index","van-collapse-item": "/wxcomponents/vant/collapse-item/index","van-picker": "/wxcomponents/vant/picker/index"}

如此，即完成了Vant组件库的引入！

uni-app项目中引入Vant UI组件库（完美避坑！！！）纯净版相关推荐

mpvue项目中使用第三方UI组件库
原文链接最新声明本文编写时间较早,随着时间的推移,mpvue及其周边生态越来越完善,文中的案例已经不适合在项目使用.希望大家参考其他更新的文章~ 简介微信小程序上线已有一年多时间啦,自美团的mp ...
Vue2 - 网易云音乐项目笔记（基于Vant UI组件库）
目录一.项目技术二.准备工作 1.初始化Vue项目 2.配置Vant UI组件库 3.下载并使用vue-router库 4.接口API 5.postcss插件三.分析页面实现功能 1.路由页面准 ...
【Vue.js】Vue.js中常用的UI组件库和Vue Router
1.Vue生态中常用的UI组件库 1. vant 介绍轻量级.可靠的移动端 Vue 组件库有赞前端团队出品 GitHub地址:https://github.com/youzan/vant 特性拥 ...
vue中集成的ui组件库_Vue组件可使用Vault Flow通过Braintree集成PayPal付款
vue中集成的ui组件库 Vue Braintree PayPal按钮 (Vue Braintree PayPal button) Vue component to integrate PayPal ...
在微信小程序里引入Vant Weapp组件库详细步骤
1. 新建一个文件夹. 2. 使用微信开发者工具选择一个模板(这里以javaScript 基础模板为例) 选择完模板之后如下: 2. 右键打开终端:按如下步骤执行命令. ① npm init 解释 ...
Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目
大家好,我是你们的猫哥,一个不喜欢吃鱼.又不喜欢喵的超级猫 ~ 关于猫哥,大家可以看看我的年终总结前端工程师的 2020 年终总结 - 3 年之痒. 前言猫哥是一个常年混迹在 GitHub 上 ...
说说如何在项目中引入 jBPM4 工作流框架以及遇到的坑儿
由于各种原因,我们需要在项目中引入 jBPM4 工作流框架,遇到了不少问题,今记录如下O(∩_∩)O 1 引入步骤 1.1 加入依赖包非 Maven 项目,在 lib 包中加入 jbpm.jar. ...
在已有vue项目中半途引入cube ui组件库的使用遇到的坑(血泪)
直接进入正题(我这儿是属于cube-ui普通编译) 1,在你的vue项目中找到package.json文件安装cube-ui 终端输入命令 npm install cube-ui --save 2 ...
项目前端（一）、vue项目中引入vue-router路由组件
1.在项目根目录下,执行 npm install vue-vouter 是否成功引入router路由组件,我们可以查看package.json文件中dependencies标签下是否有vue-rout ...

uni-app项目中引入Vant UI组件库（完美避坑！！！）纯净版

文章目录

第一步，HBuilder X中新建一个uni-app的项目

第二步，HBuilder X提示项目创建成功，在HBuilder X用命令行窗口打开创建的项目（或直接在创建的项目文件夹内用cmd指令打开）

第三步，输入npm init -y 指令，创建项目配置文件（即package.json）；

第四步，输入npm i @vant/weapp -S --production下载vant

第五步，在项目的根路径下，创建wxcomponents目录，并将依赖项（node_modules）中@vant文件夹下的dist复制到wxcomponents，并修改文件夹名为vant;

第六步，在pages.json中注册并引入组件

如此，即完成了Vant组件库的引入！

uni-app项目中引入Vant UI组件库（完美避坑！！！）纯净版相关推荐

最新文章

热门文章