手把手教学vue-cli创建uni-app的项目引入vantweapp

一、环境准备

我用的环境分别是

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

以上教程为vue2的版本，如果用的是vite和vue3创建的uni模板，引入步骤和上边的一样，只是第一步换了一个项目搭建的命令，详情见uni-app官网的使用Vue3/Vite版，引入后如果在h5页面样式没有生效,这时候可以看下微信开发者工具有没有效果，如果同样没有效果，那么在app.vue文件内的style标签内加上全部样式就好了，具体代码如下：

@import "@/wxcomponents/vant/common/index.wxss" // app.vue文件中

最后补充一句：项目如果紧急，h5不显示样式的问题可以放到后面开发完成后再来看是什么问题，或者压根都不用管他，因为小程序本来就不会在h5运行，开发过程中的优先级一定是真机调试>开发者工具>其他，也就是说只需要保证真机调试或者微信开发者工具没问题，其他都可以不用管，因为真机调试才是上线后的真实样子，如果真机调试都走不通，那么上线时候必定会有问题~~