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>中去。

<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>

.mytoast i{

    color : red !important;

}

{

    "presets": ["env", "stage-0"],

    "plugins": ["transform-runtime", ["component", [{

        "libraryName": "mint-ui",

        "style": true

    }]]]

}

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

// 使用vue.component 注册按钮组件

Vue.component('mybtn',Button);  //组件名称，实例名称