你说uni-app是什么

我说,uni-app是一套基于vue.js开发跨平台应用的前端框架,可编译多个平台,比如:Android、IOS、H5、微信小程序、支付宝小程序、头条小程序、百度小程序

懂行的人是不是觉得牛逼?想了解更多,进入官网

我说muse-ui是什么

官方说,Muse UI 是一套 Material Design 风格开源组件库,旨在快速搭建页面。它基于 Vue 2.0 开发,并提供了自定义主题,充分满足可定制化的需求。

我觉得muse ui组件都非常美观,如果能够导入到uni-app并开发项目,观感美丽一栋,可以去官网走走

如何导入muse ui

找到uni-app项目目录,在此目录上打开终端,npm安装muse-ui

随便创建一个.vue文件吧

我就写个例子,导入Button组件,首先要导入muse-ui模块从中取出Button组件,在script里添加代码

import {Button} from 'muse-ui';
import 'muse-ui/dist/muse-ui.css';

然后在components添加组件

/*lwButton可以自己自定义组件名,但是取名有很多限制*/
components:{
lwButton:Button
}

Button组件导入好了,开始应用,看看效果,点击按钮出现波纹效果,帅不帅!!

也可以不同颜色的,设置属性color='primary'

你想导入其它的组件的话,导入同上,比如我还想导入Alert组件

看到这里,你也许会想,可不可以一次性的导入所有组件,我跟你讲,“不好意思,没有这个,只能一个一个导入”,如果你仅仅只需要它们的样式,倒是可以一次性引入所有组件的样式,用法跟bootstrap组件库差不多,class直接添加组件的名称(虽然很鸡肋)

比如,我只要导入样式就行,但是只针对单一标签组成的组件才有用,代码如下

<template>
<view class="content">
<view>
<view class="mu-alert mu-success-color mu-inverse">
如果你成瘾muse-ui,未尝不可一试
</view>
</view> </view>
</template> <script>
import 'muse-ui/dist/muse-ui.css';
</script>

效果图:

我沉淫muse-ui不深,有些坑没去整理,还是留给你们~~~

uni-app项目导入第三方组件库muse-ui的更多相关文章

  1. 在 Ionic2 TypeScript 项目中导入第三方 JS 库

    原文发表于我的技术博客 本文分享了在Ionic2 TypeScript 项目中导入第三方 JS 库的方法,供参考. 原文发表于我的技术博客 1. Typings 的方式 因在 TypeScript 中 ...

  2. Python中导入第三方声源库Acoular的逻辑解释以及Acoular的下载

    [声明]欢迎转载,但请保留文章原始出处→_→ 秦学苦练:http://www.cnblogs.com/Qinstudy/ 文章来源:http://www.cnblogs.com/Qinstudy/p/ ...

  3. 在Pycharm中导入第三方模块库(诸如:matplotlib、numpy等)

    在Pycharm中导入第三方模块库 一.打开pycharm: 二.点击菜单上的“file” -> “setting”: 三.步骤二完成后出现界面如下所示.选中你的项目(比如thisyan Pro ...

  4. Vue——解决使用第三方组件库时无法修改默认样式的问题(使用 /deep/ )

    最近在开发一个基于Vue的后台管理系统,其中使用了element-ui第三方ui组件库.使用过组件库的人都知道,第三方组件往往会有一些默认的样式,而有些又是我们想要改变的. 一.基础(了解 <s ...

  5. React Native 项目常用第三方组件汇总

    React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_conte ...

  6. 【Angular】关于angular引用第三方组件库无法改变其组件样式 :host ::ng-deep

    [Angular]关于angular引用第三方组件库无法改变其组件样式 :host ::ng-deep css修改:无效 .ant-input-affix-wrapper .ant-input:not ...

  7. 在Swift项目中使用cocoaPods导入第三方OC库

    首先保证你的项目是基于cocoaPods的,并且是通过XX.xcworkspace打开的.cocoaPods安装教程(Xcode6以上) 下面就第三方库MBProgressHUD来讲解如何在Swift ...

  8. AndroidStudio导入第三方开源库 --文件夹源码

    1 在已打开的项目中  File-New-ImportModule 选择开源项目中的 库所在文件夹比如 library文件夹 然后导入. 2 File-Project  Sructure  在Modu ...

  9. react项目中antd组件库的使用需要注意的问题

    antd是蚂蚁金服推出的ui组件库,给我们在react项目开发中提供了大大的便利.但在使用的过程中,或多或少的会遇到一些问题,毕竟,用的是别人的东西,就得遵守别人的规则嘛!官方文档:https://a ...

随机推荐

  1. 升级pip3的正确姿势--python3 pip3 update

    升级pip3的正确姿势为: pip3 install --upgrade pip 而不是 pip3 install --upgrade pip3

  2. HDU-5215 Cycle(边双/判奇偶环)

    题目 HDU-5215 Cycle 网上那个啥dfs的垃圾做法随便弄组数据已经hack掉了 做法 纯奇环偶环通过dfs树上,染色判断(由于偶环可能有两个奇环,通过一点相交,dfs树上并不能判完) 两环 ...

  3. 微信小程序 movable-view组件应用:可拖动悬浮框_返回首页

    1. movable-view组件具体内容可参考官网:微信官方文档 2. demo参考:https://github.com/ChinaFanny/YFWeappMovableView 运行效果 核心 ...

  4. hdoj - 1506 直方图中最大的矩形

    Problem Description A histogram is a polygon composed of a sequence of rectangles aligned at a commo ...

  5. Activiti6 应用安装 activiti-admin,activiti-app,activiti-rest

    activiti6安装包中 1/直接将三个war包放入tomcat中,即可运行,使用H2内存数据库 2/使用mysql数据库运行 2.1/activiti-admin # security confi ...

  6. rrr

    # coding:utf-8 import pika username = 'feng' password = 'nihao' host = '192.168.1.144' credentials = ...

  7. Charles 激活入口以及账号密码

    激活入口 // Charles Proxy License // 适用于Charles任意版本的注册码,谁还会想要使用破解版呢. // Charles 4.2目前是最新版,可用. Registered ...

  8. Cucumber介绍

    Cucumber是一个提供能让我们都理解的普通语言,通过普通语言来描述的测试用例,并支持行为驱动开发的测试工具.Cucumber支持大多数变成语言,如Ruby.Java和Python等. 官方地址:h ...

  9. PL/SQL无法显示字段可以为NULL还是不能为NULL

    今天用mybatis操作oracle,用PL/SQL看到数据表的字段,明明都是可以为NULL的字段,各个字段都报错,ORA-01400 字段不能为NULL. 后面请教了同事和朋友,才知道这是PL/SQ ...

  10. express下使用ES6

    //环境切换配置 package.json scripts:{ "service": "NODE_ENV=production PORT=3000 npm start&q ...