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);  //組件名稱，實例名稱