MUI和MUIT UI 這裡使用了連個UI "mui" 和 "mit ui" mit ui是基於vue.js的，而mui是一個高性能前端框架(H5+提供的)，類似於bootstrap，所以在引入時區別還是很大的 main.js中導入，app.vue中使用 main.js app.vue ...
MUI和MUIT-UI
這裡使用了連個UI---mui和mit-ui
mit-ui是基於vue.js的，而mui是一個高性能前端框架(H5+提供的)，類似於bootstrap，所以在引入時區別還是很大的
main.js中導入，app.vue中使用
main.js
import Vue from 'vue'
// 1. 導入 vue-router 包
import VueRouter from 'vue-router'
// 2. 手動安裝 VueRouter
Vue.use(VueRouter)
// 導入bootstrap樣式
import 'bootstrap/dist/css/bootstrap.css'
import './css/app.css'
// 導入 MUI 的樣式表， 和 Bootstrap 用法沒有差別
import './lib/mui/css/mui.min.css'
// 導入所有的 MIntUI 組件
// 導入 Mint-UI
// import MintUI from 'mint-ui' //把所有的組件都導入進來
// // 這裡 可以省略 node_modules 這一層目錄
// import 'mint-ui/lib/style.css'
// // 將 MintUI 安裝到 Vue 中
// Vue.use(MintUI) // 把所有的組件，註冊為全局的組件
// 按需導入 Mint-UI組件
import { Button } from 'mint-ui'
// 使用 Vue.component 註冊 按鈕組件
Vue.component(Button.name, Button)
// console.log(Button.name)
// 導入 app 組件
import app from './App.vue'
// 導入 自定義路由模塊
import router from './router.js'
var vm = new Vue({
el: '#app',
render: c => c(app), // render 會把 el 指定的容器中，所有的內容都清空覆蓋，所以 不要 把 路由的 router-view 和 router-link 直接寫到 el 所控制的元素中
router // 4. 將路由對象掛載到 vm 上
})
// 註意： App 這個組件，是通過 VM 實例的 render 函數，渲染出來的， render 函數如果要渲染 組件， 渲染出來的組件，只能放到 el: '#app' 所指定的 元素中；
// Account 和 GoodsList 組件， 是通過 路由匹配監聽到的，所以， 這兩個組件，只能展示到 屬於 路由的 <router-view></router-view> 中去；app.vue
<template>
<div>
<h1>這是 App 組件</h1>
<!-- 為什麼這裡叫做 mt-button 的 button 直接就能用 -->
<mt-button type="danger" icon="more" @click="show">default</mt-button>
<mt-button plain>plain</mt-button>
<mt-button type="primary" size="large" plain>default</mt-button>
<mt-button type="danger" size="small" disabled>default</mt-button>
<button type="button" class="mui-btn mui-btn-royal">
紫色
</button>
<!-- <mybtn type="primary">12345</mybtn> -->
<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 {
toastInstanse: null
};
},
created() {
this.getList();
},
methods: {
getList() {
// 模擬獲取列表的 一個 AJax 方法
// 在獲取數據之前，立即 彈出 Toast 提示用戶，正在載入數據
this.show();
setTimeout(() => {
// 當 3 秒過後，數據獲取回來了，要把 Toast 移除
this.toastInstanse.close();
}, 3000);
},
show() {
// Toast("提示信息");
this.toastInstanse = Toast({
message: "這是消息",
// duration: 1000, // 如果是 -1 則彈出之後不消失
position: "top",
iconClass: "glyphicon glyphicon-heart", // 設置 圖標的類
className: "mytoast" // 自定義Toast的樣式，需要自己提供一個類名
});
}
}
};
</script>
<style>
</style>
