Vue系列之 => MintUI初使用

安装

npm i mint-ui -S

main.js

import Vue from 'vue'
// 1，导入 vue-router包
import vueRouter from 'vue-router'
// 导入mintui
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
// 使用bootstrap的样式
import 'bootstrap/dist/css/bootstrap.css'
import './css/app.css'
// 导入app组件
import app from './app.vue'
import router from './router.js'

// 将MintUI 安装到Vue
Vue.use(MintUI);
// 2，手动安装vueRouter
Vue.use(vueRouter);

var vm = new Vue({
    el: '#app',
    render: c => c(app), // render会把el 指定的容器中所有的内容都清空覆盖
    // 所以不要把router-view和router-link直接写到 el 所控制的元素中。
    router
})
// 注意app这个组件是通过vm实例的render函数渲染的，render函数如果要渲染组件
// 渲染出来的组件只能放到el : '#app' 所指定的元素中去。
// account 和 goodslist组件是通过路由匹配监听到的，所以，这两个组件只能展示到
// 属于路由的<router-view></router-view>中去。

app.vue

<template>
  <div>
    <h1>app组件</h1>
    <mt-button type="primary" icon="more" @click="show">默认按钮</mt-button>
    <router-link to="/account">account</router-link>
    <router-link to="/goodslist">goodslist</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import { Toast } from "mint-ui";

export default {
  data() {
    return {
        toastInstanse : null
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      //模拟获取数据的方法
      this.show();
      setTimeout( () => {
        //   当5S过后，数据获取成功后要把Toast移除
        this.toastInstanse.close();
      }, 5000);
    },
    show() {
      this.toastInstanse = Toast({
        message: "提示消息",
        // duration : -1, //如果是-1则弹出后不消失
        duration: -1,
        iconClass: "glyphicon glyphicon-heart",
        className: "mytoast"
      });
    }
  }
};
</script>

<style lang="">
</style>

app.css

.mytoast i{
    color : red !important;
}

 按需导入模块以减少文件大小，安装 babel-plugin-component

cnpm i babel-plugin-component -D

然后修改.babelrc文件

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

然后再引入单个模块后，用vue组件注册

import { Button,Cell } from 'mint-ui'

// 使用vue.component 注册按钮组件
Vue.component('mybtn',Button);  //组件名称，实例名称