欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue-UI(mui和muit-UI)

程序员文章站 2023-11-02 15:00:40
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---和
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>