uniapp引入vantweapp踩坑笔记
vue-cli创建uniapp项目引入vantweapp踩坑笔记
uni-app中引入vantweapp
- vue-cli创建uniapp项目引入vantweapp踩坑笔记
- 一、环境准备
- 二、项目搭建
- 三、引入vant
- 第一种方式
- 第二种方式
一、环境准备
我用的环境分别是
| 软件名称 | 版本号 | 下载命令\链接 | 检查是否成功 | 卸载命令 |
|---|---|---|---|---|
| Vue-cli | @vue/cli 4.5.19 |
npm install -g @vue/cli cnpm install -g @vue/cli yarn global add @vue/cli |
vue -V vue --version |
npm uninstall -g @vue/cli cnpm uninstall -g @vue/cli yarn global remove @vue/cli |
| node | v16.17.0 |
https://nodejs.org/en/download/releases/ 也可以使用nvm下载 这里就不赘述了 |
node -v |
在官网下载的可以直接在控制面板卸载 使用nvm的可以使用nvm的卸载命令卸载 |
| npm | 8.15.0 | 跟随node自动安装 | npm -v | 跟随node自动卸载 |
这里使用Vue-cli4的版本是因为在网上看到Vue-cli5的版本会有兼容性问题，所以这里使用了4的版本，环境准备好之后就开始踩坑环节，
不得不说，uni-app引入vant坑是真滴多！！！一步一个坑，我这边是硬踩坑过来的，以此文章来让大家避免踩坑
二、项目搭建
- vue-cli创建项目命令
vue create -p dcloudio/uni-preset-vue demo-uni
当我满怀信心的开始创建项目，但刚开始创建项目就遇到了问题，出师不利,问题如下，输入命令时报错（后边发现这个报错不是每次都会出现，因为下载源问题，）本着遇到报错不用慌，打开百度问度娘的原则，最后还是在百度找到了方法，原来是dcloudio/uni-preset-vue下载源的问题，我便在GitHub下载它的源码，把命令替换成下载文件的路径就好了,替换过后的命令如下：
vue create -p D:\code\demo\uni-preset-vue-master demo-uni因为我使用的是默认模板，测试项目可以运行，下面就要进行引入vant的坎坷之旅了
三、引入vant
因为vant分为vue2版本、vue3版本和小程序版本等，需要找到相对应的vant版本，于是就在vant官网找到了微信小程序版本vant-weapp，因为是第一次在uni-app中引入vant，以为和其他组件库一样，直接利用npm安装就好了，幸好我喜欢先过一遍安装流程再来安装，我发现vant-weapp默认提供的是利用原生小程序的引入方式，且不兼容Vue-cli创建的uni-app项目，没办法，只能继续面向百度编程，当浏览了一系列文章之后，发现vant-weapp可以在Github下载源文件进行引入，便进入到了vant-weapp的Github的网站，下载了最新的安装包，如图下图所示：
下载完成之后将文件中的dist目录文件放入项目中的wxcomponents文件中，
ps:wxcomponents文件应放到src下，并且名字不可改变，我这边的目录结构如下图所示，在src下新创建了一个wxcomponents文件，并将下载完成文件中的dist文件放入，改名为vant
第一种方式
将以上操作做完之后，接下来就是最重要的一步，在全局引用这些组件样式，根据uni-app官方文档所示，uni-app提供了easycom自动按需打包的一个配置项，我们直接将文档中的示例代码粘贴到我们项目中的pages.json文件中，并将它的配置改成我们需要的配置，如下图所示：
"easycom": {"autoscan": true,"custom": {"^van-(.*)": "@/wxcomponents/vant/$1/index.vue"}
第二种方式
除了利用easycom引入
如果同时引入了uni-ui，用easycom方式引入vant，在小程序运行会报下图错误，还可以使用vant官方的按需引入，此方法缺点就是用到哪些组件必须手动引入才可以，否则就会报错，
在pages.json中的globalStyle属性中引入以下代码：
"usingComponents": { "van-action-sheet": "/wxcomponents/vant/action-sheet/index","van-area": "/wxcomponents/vant/area/index",// "van-badge": "/wxcomponents/vant/badge/index",// "van-badge-group": "/wxcomponents/vant/badge-group/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-switch-cell": "/wxcomponents/vant/switch-cell/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"}
后边的地址要跟文件地址保持一致,此方式与uni-app提供的方式使用一种就可以
完成以上操作之后就可以在组件中使用vant-weapp中的组件来进行测试，当我重新启动项目的时候又报了一个错，如图所示：
上图的大概意思为在
src/wxcomponents/vant/icon/index.vue文件中的样式出现了问题，然后就根据提示的路径找到了这个文件，打开后发现都是一些打包过后的样式，刚进去时候一脸蒙，不知道这些样式出现了什么问题，也不敢轻易的修改文件，这时候又到了面向百度的时候了，通过在百度的帮助下，我发现原来是打包过后导致了字体文件路径出错，一共有两种方式可以解决，
- 第一个方法为格式化文档，
ps:此方法的前提是要装有Prettier插件，并且有格式化相关的配置，直接格式化文档就好了，- 第二个方法就是直接拉到文件的最下放，会发现文件下方是一些引入字体的样式文件，报错原因就是打包之后这些代码直接没有空格隔开，浏览器识别不到，解决方法也很简单，如下图所示，在标记的地方打上一个空格隔开之后存，项目就会正常运行了，并且按钮组件也运用成功了
当我以为大功告成的时候，它又双叒叕报错了，在修改完文件之后它报了找不到url-loader的错误，如下图所示，但这个错误想对就比较简单了，利用npm安装一下url-loader就好了,命令如下：
npm install url-loader
安装完成url-loader之后，项目成功运行，但我发现有些项目中到这里会有一个小小的问题，每次运行项目都要重复格式化上边的字体，比较麻烦，这个问题我找了半天也没有找到解决的方法，但我在自己的demo中只格式化了一次，后边直接打开就可以用，如有需要，可以从我的GitHub或者Gitee中来直接下载模板引用
uniapp引入vantweapp踩坑笔记相关推荐
- Vue 踩坑笔记: 引入 ElementUI 时打包失败修复记录(ERROR in ./node_modules/element-ui/lib/theme-chalk/index.css)
Vue 踩坑笔记: 引入 ElementUI 时打包失败修复记录(ERROR in ./node_modules/element-ui/lib/theme-chalk/index.css Module ...
- iphone se 一代 不完美越狱 14.6 视频壁纸教程(踩坑笔记)
iphone se 一代 不完美越狱 14.6 加 视频壁纸教程-踩坑笔记 越狱流程 1.爱思助手制作启动u盘 坑点: 2.越狱好后 视频壁纸软件 1.源 2.软件安装 越狱流程 1.爱思助手制作启动 ...
- Linux内核踩坑笔记
systemtap embedded C踩坑笔记戳这: https://blog.csdn.net/qq_41961459/article/details/103093912 task_struct的 ...
- 阿里云部署Tiny Tiny RSS踩坑笔记
阿里云部署Tiny Tiny RSS踩坑笔记 前言 入坑了RSS,之前的配置是阿里云部署RSSHub,配合Inoreader进行文章阅读,详情见RSS入坑指南.阿里云部署RSSHub踩坑笔记.在202 ...
- 「Java」基于Mirai的qq机器人开发踩坑笔记（其一）
目录 0. 前置操作 I. 安装MCL II. MCL自动登录配置 III. 安装IDEA插件 1. 新建Mirai项目 2. 编写主类 3. 添加外部依赖 4. IDEA运行 5. 插件打包 6. ...
- 「Java」基于Mirai的qq机器人开发踩坑笔记（其二）
目录 0. 配置机器人 1. onLoad方法 2. onEnable方法 3. 消息属性 4. 消息监听 I. 好友消息 II. 群聊消息 III. 无差别消息 5. 发送消息 I. 文本消息 II ...
- 昆仑通态触摸屏1003故障码，踩坑笔记
昆仑通态触摸屏1003故障码,踩坑笔记 第一次使用这个昆仑通态触摸屏,使用modbusRTU与金田变频器做通讯. 触摸屏在线后报1003通讯错误代码,现象是控制指令正常,但是读取不正常.读取变频器状态 ...
- EDUSOHO踩坑笔记之四十二：资讯
EDUSOHO踩坑笔记之四十二:资讯 获取资讯列表信息 GET /articles/{id} 权限 老API,需要认证 参数 字段 是否必填 描述 sort string 否 排序,'created' ...
- EDUSOHO踩坑笔记之三十三：班级
EDUSOHO踩坑笔记之三十三:班级 班级 班级 获取班级信息 获取班级列表 班级成员 获取班级计划 加入班级 营销平台加入班级 班级 班级 获取班级信息 GET /classrooms/{class ...
最新文章
- 获得每日，每周，每月的0点和24点的时间戳
- php 机数,PHP实现自动刷数和“灌水”机
- 批量提取文件创建时间_批量采集新浪微博用户内容
- mysql event 变量_mysql 中event的用法
- Leetcode | Implement strStr()
- Flutter异步加载FutureBuilder重绘解决方案
- Eclipse 使用
- ubuntu安装mysql后不能远程访问的方法
- 适合程序员的简历模板
- 如何在kylo中添加数据源
- 一道发散思维题，有1000个一模一样的瓶子，其中有999瓶是普通的水，有一瓶是毒........
- 密码学之恺撒加密(03)
- 分布式数据结构与算法面试题
- matlab曲面的最小值,在matlab中计算曲面的曲率
- 02—JAVA（基础）—（数据类型转换，运算符，方法）
- jupyter lab R
- 【愚公系列】2022年04月 微信小程序-项目篇(公交查询)-01周边站点
- 看《江山美人》,让我三次笑场
- 森林图怎么分析_图说meta十一：森林图暨RevMan软件使用方法简介
- ST-LINK/V2 烧录固件