MintUI部署安装--按需引入

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>

 最终，运行页面如下图。