mint-ui（基于 Vue.js 的移动端组件库）

mint-ui

1.引入文件

引入全部组件

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'

Vue.use(MintUI)

new Vue({
  el: '#app',
  components: { App }
})

解释：

import MintUi from 'mint-ui';// 把所有组件都导入进来
import 'mint-ui/lib/style.css';// 这里可以省略 node_modules 这层目录
Vue.use(MintUi);// 将 mint-ui 安装到 vue 中，把所有组件，注册为全局组件

按需引入部分组件（推荐，因为体积小）

• 借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
• 注意：按需导入，可能存在某些插件无法正常显示，此时就需要改为引入全部组件，或用其他 UI 框架
• 安装命令：npm install babel-plugin-component -D
• 然后，将 .babelrc 修改或是添加为：

    {
      "presets": [
        ["es2015", { "modules": false }]
      ],
      "plugins": [["component", [
        {
          "libraryName": "mint-ui",
          "style": true
        }
      ]]]
    }

上面出错可以试试下面的：

{
  "presets": [
    "env",
    "stage-0"
  ],
  "plugins": [
    "transform-runtime",["component", [
      {
        "libraryName": "mint-ui",
        "style": true
      }
    ]]]
}

• 最后在 main.js 中引入

import Vue from 'vue'
import App from './App.vue'

// 按需导入 mint-ui
import {Button, Cell} from 'mint-ui';
// 注册组件（引号中可自定义模板名称）
Vue.component('my-cell',Cell);
Vue.component(Button.name,Button);// 也可以这种的选择它的默认命名（推荐）

/* 或写为
 * Vue.use(Button)
 * Vue.use(Cell)
 */

new Vue({
  el: '#app',
  components: { App }
})

2.导入后的应用

类似 bootstrap ，例如在一级路由下使用：

• css components

<template>
    <p>
        <h1>这是 App 组件！</h1>
        <!-- type 是类型， size 是尺寸 -->
        <mt-button type="danger" size="large">default</mt-button>
        
        <router-link to="/account">Account</router-link>
        <router-link to="/goodslist">GoodsList</router-link>

        <router-view></router-view>
    </p>
</template>

• js components

<template>
    <p>
        <h1>这是 App 组件！</h1>
        <p class="panel">hihao</p>
        <!-- type 是类型， size 是尺寸 -->
        <mt-button type="danger" size="large">default</mt-button>

        <router-link to="/account">Account</router-link>
        <router-link to="/goodslist">GoodsList</router-link>

        <router-view></router-view>
    </p>
</template>

<script>
    // 按需导入 Toast 组件
    import {Toast} from 'mint-ui';

    export default {
        data() {
            return {
                toastClose: ''
            }
        },
        created() {
            this.getList();
        },
        methods: {
            getList() {
                // 模拟获取列表的一个 Ajax 方法
                // 在获取数据之前，立即弹出 Toast 提示用户，正在加载数据
                this.show();

                setTimeout(() => {
                    // 当 3 秒过后，数据获取回来了，要把 Toast 移除
                    this.toastClose.close();
                }, 3000)
            },
            show() {
                this.toastClose = Toast({
                    message: '加载中...', // 弹窗内容
                    position: 'top', // 显示位置
                    duration: -1, // 持续时间（-1 代表一直显示）
                    iconClass: '', // 设置图标的类(可用 bootstrap 中的字体图标)
                    className: 'red' // 自定义 Toast 的样式，需要自己提供一个类名
                });
            }
        }
    }
</script>

<style>
    .red {
        color: red !important;
    }
</style>

附加：

1. 在 vue 事件中点击有 @click ，但是 mint-ui 中有个 @tap 也是点击事件，在手机端页面中点击失灵可以换为 @tap 试试（注意：@tap 仅在 mint-ui 中适用）

文章回顾

大家看了本文mint-ui（基于 Vue.js 的移动端组件库）的精彩教程资源内容，是不是对mint-ui（基于 Vue.js 的移动端组件库）了解更多，真心希望mint-ui（基于 Vue.js 的移动端组件库）能帮助到你， 小编会一直给你带来更多教程资源文章信息。