uni-app项目导入第三方组件库muse-ui
你说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的更多相关文章
- 在 Ionic2 TypeScript 项目中导入第三方 JS 库
原文发表于我的技术博客 本文分享了在Ionic2 TypeScript 项目中导入第三方 JS 库的方法,供参考. 原文发表于我的技术博客 1. Typings 的方式 因在 TypeScript 中 ...
- Python中导入第三方声源库Acoular的逻辑解释以及Acoular的下载
[声明]欢迎转载,但请保留文章原始出处→_→ 秦学苦练:http://www.cnblogs.com/Qinstudy/ 文章来源:http://www.cnblogs.com/Qinstudy/p/ ...
- 在Pycharm中导入第三方模块库(诸如:matplotlib、numpy等)
在Pycharm中导入第三方模块库 一.打开pycharm: 二.点击菜单上的“file” -> “setting”: 三.步骤二完成后出现界面如下所示.选中你的项目(比如thisyan Pro ...
- Vue——解决使用第三方组件库时无法修改默认样式的问题(使用 /deep/ )
最近在开发一个基于Vue的后台管理系统,其中使用了element-ui第三方ui组件库.使用过组件库的人都知道,第三方组件往往会有一些默认的样式,而有些又是我们想要改变的. 一.基础(了解 <s ...
- React Native 项目常用第三方组件汇总
React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_conte ...
- 【Angular】关于angular引用第三方组件库无法改变其组件样式 :host ::ng-deep
[Angular]关于angular引用第三方组件库无法改变其组件样式 :host ::ng-deep css修改:无效 .ant-input-affix-wrapper .ant-input:not ...
- 在Swift项目中使用cocoaPods导入第三方OC库
首先保证你的项目是基于cocoaPods的,并且是通过XX.xcworkspace打开的.cocoaPods安装教程(Xcode6以上) 下面就第三方库MBProgressHUD来讲解如何在Swift ...
- AndroidStudio导入第三方开源库 --文件夹源码
1 在已打开的项目中 File-New-ImportModule 选择开源项目中的 库所在文件夹比如 library文件夹 然后导入. 2 File-Project Sructure 在Modu ...
- react项目中antd组件库的使用需要注意的问题
antd是蚂蚁金服推出的ui组件库,给我们在react项目开发中提供了大大的便利.但在使用的过程中,或多或少的会遇到一些问题,毕竟,用的是别人的东西,就得遵守别人的规则嘛!官方文档:https://a ...
随机推荐
- Java int 与 Integer 区别
学习借鉴(其实搬了别人的好多)和自己的理解,可能会有较多错误,如有疑问联系我呀. int 是基本数据类型, Integer 是引用类型,也就是一个对象. int 储存的是数值,Integer 储存的 ...
- JAVA中Stringbuffer的append( )方法
Stringbuffer是动态字符串数组,append( )是往动态字符串数组添加,跟“xxxx”+“yyyy”相当‘+’号. 跟String不同的是Stringbuffer是放一起的,String1 ...
- 块元素&行内元素
大多数HTML 元素被定义为块级元素或内联元素.块级元素在浏览器显示时,通常会以新行来开始(和结束) block元素特点 1 总是在新行上开始: 2 高度,行高以及外边距和内边距都可控制: 3 宽度缺 ...
- LeetCode 7. 反转整数(Reverse Integer)
题目描述 给定一个 32 位有符号整数,将整数中的数字进行反转. 示例 1: 输入: 123 输出: 321 示例 2: 输入: -123 输出: -321 示例 3: 输入: 120 输出: 21 ...
- python3.6安装 zipimport.ZipImportError: can't decompress data; zlib not available【转】
python3.6.3 安装: .tgz cd Python- ./configure make make altinstall `make altinstall` , 报错: zipimport.Z ...
- Python3基础 函数 函数名赋值操作
Python : 3.7.3 OS : Ubuntu 18.04.2 LTS IDE : pycharm-community-2019.1.3 ...
- Microsoft Office Project 2016使用心得(一)
Microsoft Office Project 2016使用心得(一) 新创建一个项目后的准备工作 1.修改项目开始时间 因为项目默认显示的是2009年的信息,所有视图都是从2009年开始,不便于查 ...
- Cannot start service WMSvc on computer '.'.
批处理,管理员权限执形 taskkill /im wmsvc.exe /f net stop WMSVC net start WMSVC pause
- Linux中搜索大于200M的文件
Linux中清理磁盘空间时,经常需要找出大于200M的文件. 这个命令可以实现这个功能: find / -size +200M -exec du -h {} \;
- JIT(just in time)即时编译器
JIT(just in time) 前端vs后端 在编译原理中,通常将编译分为前端和后端.其中前端会对程序进行词法分析.语法分析.语义分析,然后生成一个中间表达形式(称为IR:Intermediate ...