vue-UI（mui和muit-UI）
MUI和MUIT-UI
这⾥使⽤了连个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'
// 使⽤ Vueponent 注册按钮组件
Vueponent(Button.name, Button)
// console.log(Button.name)
// 导⼊ app 组件
import app from './App.vue'
mui框架常用组件有哪些
// 导⼊⾃定义路由模块
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() {
},
methods: {
getList() {
// 模拟获取列表的⼀个 AJax ⽅法
// 在获取数据之前，⽴即弹出 Toast 提⽰⽤户，正在加载数据
this.show();
setTimeout(() => {
//  当 3 秒过后，数据获取回来了，要把 Toast 移除
}, 3000);
},
show() {
// Toast("提⽰信息");
message: "这是消息",
// duration: 1000, // 如果是 -1 则弹出之后不消失
position: "top",
iconClass: "glyphicon glyphicon-heart", // 设置图标的类
className: "mytoast" // ⾃定义Toast的样式，需要⾃⼰提供⼀个类名      });
}
}
};
</script>
<style>
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。