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> <div> <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> </div> </template>

js components

<template> <div> <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> </div> </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>

附加：

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