专栏首页Devops专栏63. Vue MUI的基本使用

63. Vue MUI的基本使用

前言

上一篇章写了 Mint-UI 的基本使用,本篇章再来介绍MUI

注意: MUI 不同于 Mint-UI,MUI只是开发出来的一套好用的代码片段,里面提供了配套的样式、配套的HTML代码段,类似于 Bootstrap; 而 Mint-UI 是真正的组件库,是使用 Vue 技术封装出来的 成套的组件,可以无缝的和 VUE项目进行集成开发; 因此,从体验上来说, Mint-UI体验更好,因为这是别人帮我们开发好的现成的Vue组件; 从体验上来说, MUI和Bootstrap类似; 理论上,任何项目都可以使用 MUI 或 Bootstrap,但是,MInt-UI只适用于Vue项目;

MUI 并不能使用 npm 去下载,需要自己手动从 github 上,下载现成的包,自己解压出来,然后手动拷贝到项目中使用;

MUI的介绍

MUI是最接近原生APP体验的高性能前端框架。

官网地址:https://dev.dcloud.net.cn/mui/

开发文档:https://dev.dcloud.net.cn/mui/ui/

image-20200315212803694

MUI的基本使用

下载MUI

访问github进行下载:https://github.com/dcloudio/mui

image-20200315220606090

image-20200315220651564

下载下来的文件如下:

image-20200315222139508

其中dist就是我们需要引入的相关js、css等文件,而 examples 则是相关的示例代码。

导入MUI

首先将MUI的文件拷贝到项目中,如下:

image-20200315222330414

在main.js导入MUI,如下:

image-20200315222631258

// 导入 MUI
import './static/lib/mui-master/dist/css/mui.min.css'

在app组件使用mui按钮

首先看看官网的示例,如下:

image-20200315222747018

在app组件设置按钮如下:

image-20200315222908145

<!--  MUI 按钮   -->
<button type="button" class="mui-btn">默认</button>
<button type="button" class="mui-btn mui-btn-primary">蓝色</button>
<button type="button" class="mui-btn mui-btn-success">绿色</button>
<button type="button" class="mui-btn mui-btn-warning">黄色</button>
<button type="button" class="mui-btn mui-btn-danger">红色</button>
<button type="button" class="mui-btn mui-btn-royal">紫色</button>

在浏览器显示如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 60.Vue export default 和 export 的使用方式

    首先编写一个 test.js ,然后使用 export default 暴露一个对象,然后在 main.js 中导入使用。

    Devops海洋的渔夫
  • 28. Vue 使用 vue-resource 发起post请求,增加列表数据

    定义数据列表为全局变量data_list,开发add_list视图函数设置增加data_list数据,开发get_list读取data_list数据。

    Devops海洋的渔夫
  • GitBook - 插件安装 - 悬浮目录

    Devops海洋的渔夫
  • 微信小程序 页面与自定义组件数据通信

    说明:页面通过my-property讲example字符串传递给自定义组件,同样也可以使用数据绑定的方法

    天天_哥
  • 常见的 nginx 配置文件的写法

    禹都一只猫olei
  • 腾讯一面面经

    牛客网
  • 从今起尽量用严格模式编写php

    declare(strict_types=1); php 7 开始, 将declare放每个php文件的顶行, 标明文件为严格模式.

    Tuesday
  • flask 上下文变量(flask 11)

    from flask import g @app.before_request def get_name(): g.name=request.args.g...

    用户5760343
  • 机器学习——SVM进一步认识

    机器学习(十七) ——SVM进一步认识 (原创内容,转载请注明来源,谢谢) 注:这两天边看ng的svm视频,边看机器学习实战的书的svm代码,两边都看的云里雾里...

    企鹅号小编
  • 机器学习(十七) ——SVM进一步认识

    机器学习(十七)——SVM进一步认识 (原创内容,转载请注明来源,谢谢) 注:这两天边看ng的svm视频,边看机器学习实战的书的svm代码,两边都看的云里雾里...

    用户1327360

扫码关注云+社区

领取腾讯云代金券