一、安装

1、npm安装

npm i muse-ui -S

或者

CDN安装

<link rel="stylesheet" href="https://unpkg.com/muse-ui/dist/muse-ui.css">
<script src="https://unpkg.com/muse-ui/dist/muse-ui.js"></script>

2、字体安装

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

如果你想使用muse内置的Roboto字体,这里可以选择安装

3、字体图标

<link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">

这里必须先引入图标,才可以显示图标。
二、引入使用

1、完整

import Vue from ‘vue’;
import MuseUI from ‘muse-ui’;
import ‘muse-ui/dist/muse-ui.css’;

Vue.use(MuseUI);

new Vue({
el: ‘#app’,
render (h) {
return h(‘mu-button’, {}, ‘Hello World’);
}
});

2、局部(推荐)

npm i babel-plugin-import less less-loader -D

然后在 在根目录下找到.babelrc文件,修改如下:

{
“plugins”: [
[“import”, {
“libraryName”: “muse-ui”,
“libraryDirectory”: “lib”,
“camel2DashComponentName”: false
}]
]
}

更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119353304

关于Vue移动端框架(Muse-UI)的使用(说明书,针对不愿看文档的童鞋)的更多相关文章

  1. vue移动端框架到底哪家强

    Weex 2016年4月21日,阿里巴巴在Qcon大会上宣布跨平台移动开发工具Weex开放内测邀请. Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能.可扩展的 nativ ...

  2. 学习Vue.js之vue移动端框架到底哪家强

    官网:https://cn.vuejs.org/. 转载:http://www.cnblogs.com/8899man/p/6514212.html Weex 2016年4月21日,阿里巴巴在Qcon ...

  3. Vue之展示PDF格式的文档

    事实上有很多种在前端展示PDF格式文档的方法,小编也用过好多种,例如有<iframe>.<embed>和<object>这些标签,但是在Vue项目里,这些方法都不能 ...

  4. 小程序多端框架全面测评:chameleon、Taro、uni-app、mpvue、WePY

    摘要: 微信小程序开发技巧. 作者:coldsnap 原文:小程序多端框架全面测评 Fundebug经授权转载,版权归原作者所有. 最近前端届多端框架频出,相信很多有代码多端运行需求的开发者都会产生一 ...

  5. Muse UI遇到的坑

    写在前面:我只是一个前端小白,文章中的提到可能会有不足之处,仅提供一个参考.若有不完善的地方,欢迎各位大佬指出,希望对你有帮助! 故事背景是这样的,最近做一个Vue项目,使用到 Muse UI 组件库 ...

  6. Muse UI 样式

    Muse UI的icon是国外网站,被墙了所以用这个网址的icon,在index.html文件中引入下面链接: <link rel="stylesheet" href=&qu ...

  7. vue mint ui 手册文档对于墙的恐惧

    http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...

  8. vue中的swiper element ui

    欢迎加入前端交流群交流知识&&获取视频资料:749539640 很多同学问,怎么把swiper引入到vue的脚手架里去,之前的一篇博客有提到怎么引入,但是后来感觉不怎么好,还是用一些v ...

  9. Vue项目的创建和UI资源

    Vue项目创建打包与UI资源 1.Vue项目创建 1.1 vue-cli脚手架 vue-cli是一个基于vue的构建工具,用于搭建vue项目的环境,有着兼容,方便,快速的优点,能够完全遵循前后端分离的 ...

随机推荐

  1. Oracle数据库包括两个部分数据库和数据库实例

    olsnodes,这个命令用来显示集群点列表(grid即oracle rac的第三个安装包内的软件,可找到) //集群名称[grid@shdb02 ~]$ olsnodes -cshfpdb-clus ...

  2. Lumia一键刷稳定版 Win10 arm 及其报错处理

    前言 之前我发了一篇Lumia1520 刷Win10 arm双系统的文章,不过后来发现那个方法对小白来说太不友好,且系统也不稳定,所以我找到了更好的方法 刷机 我们可以利用刷机迷进行刷机,支持一键刷机 ...

  3. JetBrains Rider C# 学习②

    前言 C#从入门到精通 链接:https://pan.baidu.com/s/1UveJI_f-c5Dul3GLIICRHg 提取码:1314 C#入门课程 刘铁猛 链接:https://pan.ba ...

  4. PowerBI开发:用自然语言来探索数据--Q&A

    Power BI报表的用户,肯定会被Q&A的功能惊艳到,在查看报表时,仅仅通过输入文本就可以探索数据,并且结果是可视化的,更令人惊艳的时,结果几乎是实时显示出来的.这使得Q&A Vis ...

  5. 简单手写一个jqurey

    1 /** 2 * @description 手写jquery 3 * @author ddxldxl 4 */ 5 class Jquery { 6 constructor(selector) { ...

  6. MySQL性能优化 - 别再只会说加索引了

    MySQL性能优化 MySQL性能优化我们可以从以下四个维度考虑:硬件升级.系统配置.表结构设计.SQL语句和索引. 从成本上来说:硬件升级>系统配置>表结构设计>SQL语句及索引, ...

  7. [题解][ARC089D] ColoringBalls

    题目大意 有 \(n\) 个白色的小球排成一排,有一个长为 \(k\) 的字符串 \(S\).接下来进行 \(k\) 次操作. 第 \(i\) 个操作,选择一段连续的小球(可以为空),若 \(S\) ...

  8. 印尼医疗龙头企业Halodoc的数据平台转型之路:数据平台V1.0

    1. 摘要 数据是每项技术业务的支柱,作为一个健康医疗技术平台,Halodoc 更是如此,用户可以通过以下方式与 Halodoc 交互: 送药 与医生交谈 实验室测试 医院预约和药物 所有这些交互都会 ...

  9. 批量安装Windows系统

    今天我们利用Windows server 2019自带的Windows部署服务通过网络批量安装Win 10 一.Windows服务 1)WDS WDS(Windows Deployment Servi ...

  10. drools中query的使用

    一.背景 我们知道在drools中是存在工作内存的,我们的Fact对象会加入到工作内存中,同时我们自己也可以在drl文件中使用insert/modify/update/delete等方法,修改工作内存 ...