废话不多说,直接上步骤。。。


一、首先建好一个mpvue模板(具体看mpvue文档)

mpvue引入iview weapp的组件库


 

 二、引进iview weapp的组件库

(下载weapp链接:https://github.com/TalkingData/iview-weapp

   1、下载完了以后就得到了一个压缩包

mpvue引入iview weapp的组件库

    2、解压后打开这个文件,看到一个dist文件夹 

mpvue引入iview weapp的组件库 

    3、把dist文件夹内东西全部copy到你项目中的static的文件下的iview文件夹

      (这里我新建个iview的子文件)

mpvue引入iview weapp的组件库


 

 三、具体页面的main.json配置

mpvue引入iview weapp的组件库

{
  "navigationBarTitleText": "首页",
  "navigationBarBackgroundColor": "#000",
  "usingComponents": {
    "i-card": "../../../static/iview/card/index",
    "i-steps": "../../../static/iview/steps/index",
    "i-step": "../../../static/iview/step/index",
    "i-button": "../../../static/iview/button/index",
    "i-divider": "../../../static/iview/divider/index",
    "i-panel": "../../../static/iview/panel/index",
    "i-toast": "../../../static/iview/toast/index",
    "i-message": "../../../static/iview/message/index",
    "i-icon": "../../../static/iview/icon/index",
    "i-cell-group": "../../../static/iview/cell-group/index",
    "i-cell": "../../../static/iview/cell/index",
    "i-grid": "../../../static/iview/grid/index",
    "i-grid-item": "../../../static/iview/grid-item/index",
    "i-grid-icon": "../../../static/iview/grid-icon/index",
    "i-grid-label": "../../../static/iview/grid-label/index",
    "i-row": "../../../static/iview/row/index",
    "i-col": "../../../static/iview/col/index",
    "i-tag": "../../../static/iview/tag/index",
    "ec-canvas": "../../../static/ec-canvas/ec-canvas"
  }
}

 

四、 在具体需要用到的页面就可以用iview weapp提供的标签组件了

mpvue引入iview weapp的组件库

    <div class="followRecords">
          <i-button @click="handleClick">默认按钮</i-button>
          <i-button @click="handleClick" type="error" long="true">联通两边按钮</i-button>
          <i-button @click="handleClick" type="primary">Primary</i-button>
          <i-button @click="handleClick" type="ghost">Ghost</i-button>
          <i-button @click="handleClick" type="info">Info</i-button>
          <i-button @click="handleClick" type="success">Success</i-button>
          <i-button @click="handleClick" type="warning">Warning</i-button>
          <i-button @click="handleClick" type="error">Error</i-button>
      </div>

 

五、重新执行npm run dev命令,然后就可以看到iview组件已生效。

mpvue引入iview weapp的组件库


 

六、全剧终,续集持续拍摄中,敬请关注......

相关文章:

  • 2021-11-18
  • 2021-12-08
  • 2022-12-23
  • 2021-10-08
  • 2022-01-09
  • 2021-12-25
  • 2021-12-14
  • 2021-11-17
猜你喜欢
  • 2021-11-27
  • 2021-09-03
  • 2021-05-20
  • 2021-11-03
  • 2021-11-03
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案