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中来直接下载模板引用
