如何在mpvue中正确的引用小程序的原生自定义组件

最新推荐:《Vue3.0抢先学》系列学习教程

最近,很多人给我留言,问我说怎么在mpvue项目中引入小程序原生框架中的自定义组件。

有这种需求,是非常正常的一件事情。因为在实际开发中,我们通常希望使用已有的开源组件库来进行开发,这些开源组件库大多是基于原生自定义组件的方式写成,比如目前比较流行的Vant Weapp、iView Weapp等等。所以,在mpvue项目中如何引入并使用这些自定义组件,就成了必须了解的一个问题。

有些朋友在自己尝试的过程中遇到了挺多的问题,那就让我来告诉你们经过我实测后认为的正确使用方式吧。

步骤一:生成你的mpvue工程

通过vue-cli命令,我们先生成一个全新的mpvue工程代码:

vue init mpvue/mpvue-quickstart my-project

然后进入该工程目录,通过npm安装依赖:

cd my-project
npm install

步骤二:下载小程序组件库

小程序的组件库有挺多,我们这里选用iVew Weapp作为示例。你可以直接去github把iView Weapp的代码下载下来,也可以用过npm来下载:

npm i iview-weapp

下载完成后,到它的目录中寻找名为dist的目录,这里面存放的就是iView Weapp原生小程序自定义组件代码。

步骤三:将组件库复制到工程的static目录下

你可以将上面提到的整个dist目录复制到你的mpvue工程下的static目录下(记得一定要是static目录,否则这些代码会被mpvue编译器错误的进行处理),然后给这个dist目录改个名字,比如叫iview。

步骤四:为需要使用自定义组件的Page进行配置

我们知道,原生小程序开发中,我们如果要在Page中使用自定义的组件,则需要在该Page对应的.json配置文件中配置要使用的自定义组件。在mpvue中,我们也需要做等价的配置。

比如,现在我要在src/pages/index/index.vue中使用iView中的i-button组件,那么就先要在src/pages/index/main.json(如果没有该文件,则新建一个)中进行如下配置:

{
  "usingComponents": {
    "i-button": "../../static/iview/button/index"
  }
}

步骤五:在Page中使用自定义组件

经过上一步的配置,我们就可以开始在src/pages/index/index.vue中使用这个i-button组件了,就像这样:

<template>
  <div class="container">
    <i-button type="primary" @click="bindViewTap">这是一个按钮</i-button>
  </div>
</template>

运行这个小程序,能看到如下的样子:

怎么样?很简单吧!快试试吧。

推荐阅读更多精彩内容

  • 因新工作主要负责微信小程序这一块,最近的重心就移到这一块,该博客是对微信小程序整体的整理归纳以及标明一些细节点,初...
    majun00阅读 3,182评论 0赞 4
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 78,994评论 12赞 120
  • 今年要读最少50本书,所以每完成一本来打次卡,并且可以作为索引页。 1 《向前一步》,已完成,输出一篇已完成。这本...
    一只淡定的猫阅读 39评论 2赞 2
  • “特园”商标的注册,预示着“特园”文化的传承和发展,有了法律上的保障。“新蜀”文化作为“特园”文化不可分割的组成部...
    新蜀报阅读 38评论 0赞 0
  • “妈妈团团赚”项目从2016年12月27日横空出世后, 已经聚集了近400位老爸老妈, 还有爱学习、爱进步的姑娘小...
    马海燕阅读 73评论 0赞 0