mpvue搭配iView开发小程序

一起进步，一起共勉~

初始化mpvue项目

需提前安装好node跟npm，请自行google安装

# 全局安装 vue-cli
$ npm install --global vue-cli

# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev

接下来启动微信开发者工具，引入项目即可预览到 mpvue 小程序！

使用 iView 组件库

1、下载iView

从这里下载iview-weapp项目

2、配置iView

将iview-weapp中的dist文件夹(此处我重命名为iview,以便区分)复制到mpvue项目的输出目录中(默认是dist，编译后的vue代码在此)

3、使用iView

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

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

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

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

运行这个小程序，能看到如下的样子：