基于mpvue引入第三方插件vant

官网地址:https://youzan.github.io/vant-weapp/#/quickstart

一 安装

步骤一 通过 npm 安装

npm i vant-weapp -S --production

通过 yarn 安装

yarn add vant-weapp --production

二 构建npm包

这里略过.

三 使用

在main.josn或者App文件中使用
{ "usingComponents": { "van-button": "vant-weapp/button" } }

在.vue文件中也就是wxml文件中使用
<van-button plain hairline type="primary">组局</van-button>
<van-button plain hairline type="primary">残忍拒绝</van-button>

咱一编译一跑!

出现错误!!!

Component is not found in path “pages/…”

折腾了一下午
网罗了大量的资源找到了几个方法,一一尝试:

1.将打包好的微信小程序文件夹删掉;node_moudle文件夹删掉;重新在项目目录下运行

npm init
npm install

再重复步骤三
失败未果

2.因为打包好的微信小程序下没有vant-wreapp文件,所以合理怀疑是npm构建问题

按照热心网友的指引,在第一个方法后再在微信开发工具中使用 --工具–>构建工具

总之把这几个方法混合搞了一遍,但是真的没有效果…冷漠脸
是的,把上面全部都勾了一遍也不可.

3.动动脑子 重新分析下问题

(1)问题是找不到引用的组件

找不到组件大概这三个问题

a.引入组件的包不存在,就是npm后,nodemoudle中没有引入的第三方包

b.第三方包并没有成功编译到成微信小程序的文件中

c.第三方包的使用出错

d.引用的组件路径错误

(2)首先我排除了a,c

那只剩b,d.
我们仔细一查目录

编译后的微信小程序文件夹确实很干净没有什么其他的第三方包包呢!!!肝!
在很早之前微信小程序是不支持npm的,但是经过大家吐槽后,改正了,好同志!
来来,看看文档

然而构建不成功啊摔!

难道就没有办法搞了吗??
怎么可能!
跟着热心网友的骚操作~
直接把包拷贝到微信小程序文件中好了…
(1).找到node_modle中的第三方包vant-weapp,拷贝dist文件夹
(2).找到编译后微信小程序文件复制文件夹,重命名文件为 vant-weapp.

---

ok,到这里b问题解决了.
如果没有猜错的话,依然有d问题.
那我们来看看微信小程序的配置文件 project.config.json
{ "miniprogramRoot": "dist/wx/", }

dist/wx/就是微信小程序[目标文件]的根目录了.有些人喜欢用"miniprogram"
那么[源文件]在main.json中怎么引用这个组件的路径

这个时候要看咱们把vant-weapp文件夹拷贝到什么目录下了

我们要在group中引入vant-weapp,vant-weapp是相对父级下目录

./ 当前目录
…/ 父级目录
/ 根目录

所以在 源文件中group/main.json中引用

{
“usingComponents”: {
“van-button”: “…/vant-weapp/button/index”
}
}

在group/index.vue中使用
<template>
<div>
<p>hello 组局吗?</p>
<van-button plain hairline type=“primary”>组局</van-button>
<van-button plain hairline type=“primary”>残忍拒绝</van-button>
</div>
</template>
<script>
export default {}
</script>
<style>
</style>
重新编译后,使用微信小工具查看效果

到此就结束了.

这个过程因为心急走了很多弯路,希望自己下次可以冷静点;npm构建问题仍然没彻底解决,留下了隐患,希望这篇记录可以帮助到大家,也希望大家能够指导一些更好的方法.