微信小程序，Mpvue框架，引入iView Weapp UI库

Mpvue框架，引入iView Weapp UI库

出错

Component is not found in path “iView/button/index” (using by “pages/index/main”)
Error: Component is not found in path “iView/button/index” (using by “pages/index/main”)

• iView Weapp 是针对小程序开发的Ui组件库
• Mpvue是将Vue应用到小程序的框架，类似的还有wype、Mpx等等，各有不同，区别在这里不详述
• 问题: 在使用Mpvue框架后，再使用iView Weapp官网所述的方式引入，则会并没有效果，有的还会提示路径找不到

1. 先来分析一下原因

1. 首先，iView Weapp 之所以要求替换dist 文件夹，是因为小程序在编译过后，所有的文件都会被打包在dist中，dist也是小程序的运行目录，一切代码都应该存在dist中。 因此只有将iView Weapp 的dist放在项目的dist中，小程序启动时候才可以找到路径。
2. 其次，看下小程序的项目配置说明。

• miniprogramRoot 就是小程序的源码目录，
  

3. 再来看看Mpvue搭建的框架中，并没有所谓的 miniprogramRoot ，但在 project.config.json 中配置了miniprogramRoot的路径， 如下图所示
   
   也就是，将miniprogramRoot 指向了 dist/wx

2. 再看如何解决

• 前面提到，iView Weapp之所以需要用户将 提供的dist 放到自己dist中，是为了在打包后仍然可以找到引入的库。
• 所以这里再引入的时候，就不能再简单的替换dist文件夹
• 应该将其dist放到 dist/wx 目录下，这里为了方便，将iView Weapp 的dist改名为 iView
• 然后放到 dist/wx 目录下，如下图
  
• 这是解决了引入的问题。但由于更改了一些东西，使用的时候，也对应有些变化

3. 使用

• 使用步骤，仍然不变，分两步，声明自定义组件再使用
• 声明时候：
  • 在app.json中声明
  • 但要注意路径的更改
    
• 使用时候是不怎么改变，但如果想用vue的双向绑定，则需要做些更改。以input为例，官网的value=“{ {value}}” 更改为 v-modal="value"，如下所示
  

---

插一句题外话，Mpvue已经没人维护了，相比这下现在的uni-app更好，无论是看对vue的支持，还是考虑组件的丰富性都是很不错的框架。