vue-UI(mui和muit-UI)
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>
vue-UI(mui和muit-UI)的更多相关文章
- Vue项目的创建和UI资源
Vue项目创建打包与UI资源 1.Vue项目创建 1.1 vue-cli脚手架 vue-cli是一个基于vue的构建工具,用于搭建vue项目的环境,有着兼容,方便,快速的优点,能够完全遵循前后端分离的 ...
- Vue移动组件库Mint UI的安装与使用
一.什么是 Mint UI 1.Mint UI 包含丰富的 CSS 和 JS 组件,可以提升移动端开发效率 2.Mint UI 按需加载组件 3.Mint UI 轻量化 二.Mint UI 的安装 1 ...
- vue 无法覆盖vant的UI组件的样式
vue 无法覆盖vant的UI组件的样式 有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用. 解决方法: 使用深度选择器,将 ...
- Laravel 6.X + Vue.js 2.X + Element UI +vue-router 配置
Laravel 版本:6.X Vue 版本:2.X Laravel配置: Laravel使用的是Laragon安装 选择Laravel:接下来弹出框,输入项目名,laravel会自动创建一个数据库,数 ...
- vue配合iview/element等ui实现界面效果起步
iview与element都是与vue配合使用的ui框架,用法与配置基本一致,在此,我以iview为例,教你如何起步.*首先,你需要有一定的vue基础,如果你还是个小白,可以去我之前介绍如何搭建一个v ...
- Android UI线程和非UI线程
Android UI线程和非UI线程 UI线程及Android的单线程模型原则 当应用启动,系统会创建一个主线程(main thread). 这个主线程负责向UI组件分发事件(包括绘制事件),也是在这 ...
- iOS开发UI篇—APP主流UI框架结构
iOS开发UI篇—APP主流UI框架结构 一.简单示例 说明:使用APP主流UI框架结构完成简单的界面搭建 搭建页面效果: 二.搭建过程和 ...
- jQuery UI Autocomplete是jQuery UI的自动完成组件(share)
官网:http://jqueryui.com/autocomplete/ 以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/25 ...
- 第四十四课:jQuery UI和jQuery easy UI
jQuery UI是jQuery官方提供的功能效果和UI样式.作为官方出的东西,它一直没有被人们看重,一是它没有datagrid,tree等UI库必备的东西,二是它修改太过频繁,体积庞大.其实它所有以 ...
- NGUI创建Camera参数为Simple 2D的UI UI对象的结构UI Root(2D)
NGUI创建Camera参数为Simple 2D的UI UI对象的结构UI Root(2D) 使用NGUI创建的Camera参数为Simple 2D的UI,会在游戏的场景中生成1个名为UI Root( ...
随机推荐
- C#Windows Forms 计算器--xdd
一.计算器 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data ...
- PHP安装sodium加密扩展
1.为什么会用到sodium加密扩展? 最近在做微信服务商相关的开发,主要用的的接口为微信小微商户进件接口.在请求相关接口中,需要对一些敏感字段进行加密,加密过程见https://pay.weixin ...
- shell中的函数、shell中的数组、告警系统需求分析
7月16日任务 20.16/20.17 shell中的函数20.18 shell中的数组20.19 告警系统需求分析 20.16/20.17 shell中的函数 函数就是一个子shell就是一个代码段 ...
- Matlab交叉验证函数——crossvalind
Generate cross-validation indices 生成交叉验证索引 Syntax语法 Indices = crossvalind('Kfold', N, K) %K折交叉验证 ...
- 小白的springboot之路(二)、集成swagger
0-前言 现在的项目开发,基本都是前后端分离,后端专注于API接口开发,都需要编写和维护API接口文档.如果你还在用Word来编写接口文档,那你就out了,这个时候,当当当当~神兵利器swagger隆 ...
- mysql客户端 navicat 本地导入sql文件出错
以前遇到过这个问题,找了半天度娘没解决,然后就放弃了. 因为是自己 demo 的项目 所以就自己手动建表了. 现在实习了,去到公司下载下代码来,拿上sql 导入发现还是报错, 根本没法整,然后自己都不 ...
- 有趣的css3实战案例剖析—(背景动态渐变)
对于css3的学习,更多的是在于对新特性和基础理论的熟悉,这篇文章通过一个案例带领大家了解css3里一些理论知识,也将一些技巧加以总结,从而提高大家的开发效率: 本次案例为(背景颜色渐变),运用css ...
- 0-N-0计数的优化写法
采用取余%的写法: int i = 0; while( 1 ) { printf( "%d\n", i ); i = ( i + 1 ) % ( N + 1 );}
- 如何对IP地址进行子网划分?
在网络行业,子网划分是必须掌握的的基础知识点,下图是IP地址分类: 子网划分主要掌握的是划分思路,接下来我以192.168.1.72/27的IP划分做为例子: CIDR:无类域间路由. 可以看出192 ...
- 一道随机函数题:由rand5()生成rand7()
题目:已知rand5()函数能随机等概率的生成0, 1, 2, 3, 4,利用rand5()函数编写一个rand7()函数实现相似的功能. 分析:其实就是利用rand5()组合成一个更大范围的数,之后 ...