uniapp项目中引入vant-Weapp(局部全局都有 史上最详细的方法)

news2024/11/19 11:28:07

1.先在根目录创建wxcomponents文件夹

2.打开 https://github.com/youzan/vant-weapp 下载最新的vant-Weapp

 3.把我们下好的文件vant-weapp里面只留下dist其余的可以全部删掉,然后把vant-weapp放到 wxcomponents里面

4.在App.vue引入vant样式

@import '/wxcomponents/vant-weapp/dist/common/index.wxss'

5.然后在pages.json引入(局部引入)

"usingComponents": {
                  "van-button": "/wxcomponents/vant-weapp/dist/button/index"
                }

6. 然后在页面引入button(注意:你在当前页面引入了button其他的页面没有引入,其他页面就用不了,其他页面想用,就得在path相应的路径引入)

 7.这个时候页面会报错,注意:(重新启动项目即可)

 8.然后就可以看到页面的组件出来了

 9.下面是全局引入

 10.分享一些常用的组件你们直接复制到你的usingComponents下面页面就可以直接用了

"usingComponents": {
						  //这里为方便,全局引入了所有组件,也可以在某个page下单独引用某个组件
                "van-action-sheet": "/wxcomponents/vant-weapp/dist/action-sheet/index",
				"van-area": "/wxcomponents/vant-weapp/dist/area/index",
				// "van-badge": "/wxcomponents/vant-weapp/dist/badge/index",
				// "van-badge-group": "/wxcomponents/vant-weapp/dist/badge-group/index",
				"van-button": "/wxcomponents/vant-weapp/dist/button/index",
				"van-card": "/wxcomponents/vant-weapp/dist/card/index",
				"van-cell": "/wxcomponents/vant-weapp/dist/cell/index",
				"van-cell-group": "/wxcomponents/vant-weapp/dist/cell-group/index",
				"van-checkbox": "/wxcomponents/vant-weapp/dist/checkbox/index",
				"van-checkbox-group": "/wxcomponents/vant-weapp/dist/checkbox-group/index",
				"van-col": "/wxcomponents/vant-weapp/dist/col/index",
				"van-dialog": "/wxcomponents/vant-weapp/dist/dialog/index",
				"van-field": "/wxcomponents/vant-weapp/dist/field/index",
				"van-goods-action": "/wxcomponents/vant-weapp/dist/goods-action/index",
				"van-goods-action-icon": "/wxcomponents/vant-weapp/dist/goods-action-icon/index",
				"van-goods-action-button": "/wxcomponents/vant-weapp/dist/goods-action-button/index",
				"van-icon": "/wxcomponents/vant-weapp/dist/icon/index",
				"van-loading": "/wxcomponents/vant-weapp/dist/loading/index",
				"van-nav-bar": "/wxcomponents/vant-weapp/dist/nav-bar/index",
				"van-notice-bar": "/wxcomponents/vant-weapp/dist/notice-bar/index",
				"van-notify": "/wxcomponents/vant-weapp/dist/notify/index",
				"van-panel": "/wxcomponents/vant-weapp/dist/panel/index",
				"van-popup": "/wxcomponents/vant-weapp/dist/popup/index",
				"van-progress": "/wxcomponents/vant-weapp/dist/progress/index",
				"van-radio": "/wxcomponents/vant-weapp/dist/radio/index",
				"van-radio-group": "/wxcomponents/vant-weapp/dist/radio-group/index",
				"van-row": "/wxcomponents/vant-weapp/dist/row/index",
				"van-search": "/wxcomponents/vant-weapp/dist/search/index",
				"van-slider": "/wxcomponents/vant-weapp/dist/slider/index",
				"van-stepper": "/wxcomponents/vant-weapp/dist/stepper/index",
				"van-steps": "/wxcomponents/vant-weapp/dist/steps/index",
				"van-submit-bar": "/wxcomponents/vant-weapp/dist/submit-bar/index",
				"van-swipe-cell": "/wxcomponents/vant-weapp/dist/swipe-cell/index",
				"van-switch": "/wxcomponents/vant-weapp/dist/switch/index",
				// "van-switch-cell": "/wxcomponents/vant-weapp/dist/switch-cell/index",
				"van-tab": "/wxcomponents/vant-weapp/dist/tab/index",
				"van-tabs": "/wxcomponents/vant-weapp/dist/tabs/index",
				"van-tabbar": "/wxcomponents/vant-weapp/dist/tabbar/index",
				"van-tabbar-item": "/wxcomponents/vant-weapp/dist/tabbar-item/index",
				"van-tag": "/wxcomponents/vant-weapp/dist/tag/index",
				"van-toast": "/wxcomponents/vant-weapp/dist/toast/index",
				"van-transition": "/wxcomponents/vant-weapp/dist/transition/index",
				"van-tree-select": "/wxcomponents/vant-weapp/dist/tree-select/index",
				"van-datetime-picker": "/wxcomponents/vant-weapp/dist/datetime-picker/index",
				"van-rate": "/wxcomponents/vant-weapp/dist/rate/index",
				"van-collapse": "/wxcomponents/vant-weapp/dist/collapse/index",
				"van-collapse-item": "/wxcomponents/vant-weapp/dist/collapse-item/index",
				"van-picker": "/wxcomponents/vant-weapp/dist/picker/index"
		                }

以上就是局部全局的方法啦,记得点个赞

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409221.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

蓝桥杯web开发-5道模拟题让你信心满满

📋 个人简介 💖 作者简介:大家好,我是阿牛,全栈领域新星创作者。😜📝 个人主页:馆主阿牛🔥🎉 支持我:点赞👍收藏⭐️留言&#x1f4d…

最好的Vue组件库之Vuetify的入坑指南(持续更新中)

目录 安装Vuetify 文档结构 快速入门 特性 样式和动画 首先先声明,个人不是什么很牛逼的大佬,只是想向那些想入坑Vuetify的前端新手或者嫌文档太长不知如何入手的人提供一些浅显的建议而已,能让你们稍微少走一些弯路就是本文的目的。我其实也…

『从零开始学小程序』媒体组件video组件

👨‍🎓作者简介:一位喜欢写作,计科专业大三菜鸟 🏡个人主页:starry陆离 🕒首发日期:2022年9月15日星期四 如果文章有帮到你的话记得点赞👍收藏💗支持一下哦 『…

Vue结合高德地图实现HTML写自定义信息弹窗

最近在写项目的时候有个需求就是根据点击地图上的点展示对应的信息,弹窗看着还挺花哨的。我在高德地图官网上还有各大平台找了如何自定义弹窗,可给出的大多数都是通过JS写HTML结构,我感觉这种不仅不好布局,而且可读性和维护性都不…

客户端会话跟踪技术 Cookie 浅谈

文章目录前言为什么之前浏览器和服务器不支持数据共享?会话跟踪技术Cookie的概念Cookie的工作流程Cookie的基本使用Cookie原理分析Cookie的存活时间Cookie存储中文前言 用户打开浏览器,第一次访问 Web 服务器资源时,会话建立,直到…

富文本编辑器Quill 介绍及在Vue中的使用方法

在Web开发中,富文本编辑器是不可或缺的一个功能组件,掌握少量基础语法就能让一篇文章实现较为不错的排版效果,即见即所得。 目前市场上已提供大量集成富文本编辑器的包,Quill 作为其中一个,以简单、易上手特点&#x…

vue项目打包失败问题记录

项目"vue": "^2.7.14"版本 起因:项目里安装了openlayers最新版本的地图插件,打包会成功,但是打包页面会有红色提示 刚开始根据红色提示百度找到相同错误的方法提供了的一系列提示安装啊,卸载,装了…

【WebSocket 协议】Web 通信的下一步进化

标题【手动狗头🐶】,大佬轻饶 目录一、什么是 WebSocket ?二、WebSocket 应用场景?三、代码中的 WebSocket四、一个完美的案例:在线聊天程序实现服务器chat/index.js实现客户端chat/index.htmlchat/style.css最终效果WebSocket 是基于单个 …

关于elementUI表单的清除验证以及复合型输入框

目录 一、清除表单的验证 问题的发生以及解决过程 代码 总结 二、复合型输入框——查询(前置和后置都有的) 问题的发生以及解决过程 代码 展示 一、清除表单的验证 问题的发生以及解决过程 表单弹窗关闭后再打开会出现上一次的验证信息提示&am…

JS中如何判断一个值是否为Null

前言 在鉴别JavaScript原始类型的时候我们会用到typeof操作符。Typeof操作符可用于字符串、数字、布尔和未定义类型。但是你运行typeof null时,结果是“object”(在逻辑上,你可以认为null是一个空的对象指针,所以结果为“object”)。 如何判…

Vue3【计算属性、Class绑定、Style绑定 、侦听器、表单输入绑定、模板引用、组件注册方式、组件嵌套关系 、组件注册方式】(三)-全面详解(学习总结---从入门到深化)

👏作者简介:大家好,我是小童,Java开发工程师,CSDN博客博主,Java领域新星创作者 📕系列专栏:前端、Java、Java中间件大全、微信小程序、微信支付、若依框架、Spring全家桶 &#x1f4…

一个小项目带你了解vue框架——TodoList(简单实用易上手)

写在前面 你是否还在为繁杂的事情感到头昏脑涨?你是否还在将便利贴贴满整个桌面?本文就为你解决这个烦恼,使用vue框架做一个TodoList,将事情整理的井井有条不再是一个遥不可及梦!让我们行动起来吧! 基于vue…

解决前端项目问题,uniapp运行微信开发工具小程序,出现× initialize报错,以及浏览器无法运行

项目场景: uniapp进行小程序以及多端web页面都不知道如何配置讲项目运行起来。 就会报出无法运行错误。 [微信小程序开发者工具] - initialize [微信小程序开发者工具] [微信小程序开发者工具] IDE may already started at port , trying to connect如图 问题描…

微信小程序前端解密获取手机号

微信小程序在获取用户手机号时安全正确的做法是把获取的iv等信息传递给后端&#xff0c;让后端解密&#xff0c;再提供接口返回给前端。 但是遇到一下比较一般的后端或者懒的后端的话&#xff0c;前端也可以考自己完成手机号解密。 1.使用授权手机号组件按钮 <view class&…

【Vue】Cannot set reactive property on undefined,null,or primitive value:undefined

一、背景描述技术栈&#xff1a;vue element报错内容&#xff1a;Cannot set reactive property on undefined, null, or primitive value:undefined如下图所示&#xff1a;二、报错原因根据报错内容翻译一下&#xff0c;就是不能对 undefined,null 或者原始值为 undefined 的…

uniapp中怎么使用easycom 自定义组件

一、全局注册 uni-app 支持配置全局组件&#xff0c;需在 main.js 里进行全局注册&#xff0c;注册后就可在所有页面里使用该组件。 Vue.component 的第一个参数必须是静态的字符串。nvue 页面暂不支持全局组件。 二、局部注册 局部注册之前&#xff0c;在需要引用该组件的…

详解Promise使用

Promise引入PromiseExecutorresolve不同值的区别then方法catch方法finally方法resolve类方法reject类方法all类方法allSettled方法race方法引入Promise 我们调用一个函数&#xff0c;这个函数中发送网络请求(我们可以用定时器来模拟)&#xff1b; 如果发送网络请求成功了&…

前端面试题 | 什么是回流和重绘?它们的区别是什么?

在了解回流和重绘之前我们可以先简单了解一下浏览器的渲染过程~ 1. 解析获取到的HTML&#xff0c;生成DOM树&#xff0c;解析CSS&#xff0c;生成CSSOM树 2. 将DOM树和CSSOM树进行结合&#xff0c;生成渲染树&#xff08;render tree&#xff09; 3.根据生成的渲染树&#xff0…

Vue开发环境安装

目录 Vue概述&#xff1a; Vue特点&#xff1a; Vue官网: 一、node.js安装和配置 1. 下载安装node.js Step1&#xff1a;下载安装包 Step2&#xff1a;安装程序 Step3&#xff1a;查看 问题解决&#xff1a; 解决npm warn config global --global, --local are depr…

Session详解

&#x1f451; 博主简介&#xff1a;    &#x1f947; Java领域新星创作者    &#x1f947; 阿里云开发者社区专家博主、星级博主、技术博主 &#x1f91d; 交流社区&#xff1a;BoBooY&#xff08;优质编程学习笔记社区&#xff09; 前言&#xff1a;上节我们详细讲解了…