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>

運行這個小程序，能看到如下的樣子：