1.使用 vue-cli

npm install -g vue-cli

vue init webpack projectname

注意：ESLint 是否選擇，根據個人需要。

2. 進入project，安裝mint-ui

cd projectname

npm i mint-ui -S

至此，已經完成安裝。

3. 使用babel，安裝 babel-plugin-component

npm install babel-plugin-component -D

4. 使用IDE開啟專案（推薦IDEA）

5.將 .babelrc 修改為如下內容，全部替換即可。（其中， ["es2015", { "modules": false }],  語句可以刪除，刪除後，步驟6可跳過）

{
  "presets": [
    ["es2015", { "modules": false }],
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    ["component", [
      {
        "libraryName": "mint-ui",
        "style": true
      }
    ]]
  ]
}
 

6.安裝 babel-preset-es2015

npm install babel-preset-es2015

7.在src目錄下，建立mint-ui資料夾，並新增index.js檔案，內容示例如下：（本步驟目的是將所有mint的引入寫在index.js中，非必須步驟，如不執行本步驟，則可將引入寫在main.js中）

import Vue from 'vue'
import { Button, Actionsheet } from 'mint-ui'
Vue.component(Button.name, Button)
Vue.component(Actionsheet.name, Actionsheet)
 

8.在main.js中，新增如下語句：（如步驟7未執行，則跳過本步驟）

import './mint-ui/index.js'

9.寫一個測試的vue頁面，測試即可。示例程式碼如下：

<template>
  <div class="hello">
    <mt-button @click.native="sheetVisible = true" type="primary" size="large">primary</mt-button>
    <mt-actionsheet
      :actions="actions"
      v-model="sheetVisible">
    </mt-actionsheet>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        actions: [],
        // 設定為 true 預設就自動彈出 actionSheet
        sheetVisible: false
      }
    },
    created() {
      this.actions = [
        {name: '拍照'},
        {name: '開啟相簿'}
      ]
    }
  }
</script>

<style scoped>

</style>

 最終，執行頁面如下圖。