美团开源出的mpvue 是一个使用 Vue.js 开发小程序的前端框架。由于它是围绕小程序开发为目的，针对于微信原生开发的再次封装。但因为小程序平台原因(比如不能操作DOM，BOM)，所以有些第三方框架不能引入，下面我们以有赞前端团队vant UI组件库说明mpvue如何引入UI组件库的。

根据官网提示，有两种安装方式，1.通过 npm 安装，2.下载代码导入。

1.下载vant UI组件在开源项目这里下载vant UI组件，打开文件夹，将其项目下的dist文件全部拷贝到一个新的文件夹里，名命为:vant-weapp。

2.存放UI组件文件在mpvue项目中

将vant-weapp的文件夹放在mpvue项目根目录下的static的下面，如下图所示位置:

3.引入组件在要引入组件的文件夹下，创建main.json，如下图所示位置：

在其main.json中，加入如下代码:

4.使用组件在用webstorm打开src下的文件夹，在上述main.js同级的index.vue中，放入如下代码：然后终端运行npm run dev

实现效果图如下:

1.使用 npm 安装用webstorm打开项目的src下的文件夹，在终端输入如下代码：

安装完成

2.构建npm保证是微信开发者工具是最新版本，选择工具--->构建npm，小程序的根目录出现了 miniprogram_npm这个文件夹。

3.引入组件需要调用到Vant组件的时候，在相对应的.json文件里添加配置：

4.使用组件如方式一所示

我们在参考vant-weapp的官方文档时，有些语法需要做适当的调整，因为官方用法是使用wxml的语法，并不完全的适合mpvue。

1.数据的绑定方式

小程序，在标签内绑定数据的方式

mpvue需要更改为:

2.事件的绑定方式

小程序绑定方式

mpvue需要更改为:

3.获取 event 事件对象中值

4.在使用交互性第三方组件类似Toast，第三方结构如下图所示:

这类组件都要有两个引入，一是组件的引入，这个在main.json中引入；另一个是方法的引入，需要在vue文件中import引入。

5.全局引入组件不显示考虑到在每个页面引入组件很是麻烦，能不能全局引入呢？测试一下发现不行，无论是在app.json或app.js加入都不可以。

解决方案：

(1).打开了微信开发者工具中的ES6转ES5功能。

(2).打开node_modules文件夹找到vant-weapp中的dist文件夹拷贝到miniprogram_npm文件夹下，同时把路径中的“path/to/”删除，然后再运行就不会报错了

2.

解决方案:

 检查相应文件夹下的main.json，内容是否为空，格式是否正确。

3.在添加UI组件后,报页面丢失，TypeError: Cannot read property 'index' of undefined。解决方案:(1). 新建的页面，没有重新打包npm run dev(2).添加的组件路径是否有问题，路径错误或者是重复添加。

本文独发金蝶云社区。