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 ,例如在一级路由下使用:
<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>
<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 中适用)