关于Vue移动端框架(Muse-UI)的使用(说明书,针对不愿看文档的童鞋)
一、安装
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)的使用(说明书,针对不愿看文档的童鞋)的更多相关文章
- vue移动端框架到底哪家强
Weex 2016年4月21日,阿里巴巴在Qcon大会上宣布跨平台移动开发工具Weex开放内测邀请. Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能.可扩展的 nativ ...
- 学习Vue.js之vue移动端框架到底哪家强
官网:https://cn.vuejs.org/. 转载:http://www.cnblogs.com/8899man/p/6514212.html Weex 2016年4月21日,阿里巴巴在Qcon ...
- Vue之展示PDF格式的文档
事实上有很多种在前端展示PDF格式文档的方法,小编也用过好多种,例如有<iframe>.<embed>和<object>这些标签,但是在Vue项目里,这些方法都不能 ...
- 小程序多端框架全面测评:chameleon、Taro、uni-app、mpvue、WePY
摘要: 微信小程序开发技巧. 作者:coldsnap 原文:小程序多端框架全面测评 Fundebug经授权转载,版权归原作者所有. 最近前端届多端框架频出,相信很多有代码多端运行需求的开发者都会产生一 ...
- Muse UI遇到的坑
写在前面:我只是一个前端小白,文章中的提到可能会有不足之处,仅提供一个参考.若有不完善的地方,欢迎各位大佬指出,希望对你有帮助! 故事背景是这样的,最近做一个Vue项目,使用到 Muse UI 组件库 ...
- Muse UI 样式
Muse UI的icon是国外网站,被墙了所以用这个网址的icon,在index.html文件中引入下面链接: <link rel="stylesheet" href=&qu ...
- vue mint ui 手册文档对于墙的恐惧
http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...
- vue中的swiper element ui
欢迎加入前端交流群交流知识&&获取视频资料:749539640 很多同学问,怎么把swiper引入到vue的脚手架里去,之前的一篇博客有提到怎么引入,但是后来感觉不怎么好,还是用一些v ...
- Vue项目的创建和UI资源
Vue项目创建打包与UI资源 1.Vue项目创建 1.1 vue-cli脚手架 vue-cli是一个基于vue的构建工具,用于搭建vue项目的环境,有着兼容,方便,快速的优点,能够完全遵循前后端分离的 ...
随机推荐
- 物理层(PHY)
一.物理层的定义 物理层是OSI的第一层,它虽然处于最底层,却是整个开放系统的基础.物理层为设备之间的数据通信提供传输媒体及互连设备,为数据传输提供可靠的环境.如果您想要用尽量少的词来记住这个第一层, ...
- Codeforeces 13B
计算几何二维基础
- 2021.08.05 P5357 康托展开模板(康托展开)
2021.08.05 P5357 康托展开模板(康托展开) P5367 [模板]康托展开 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 重点: 1.康托展开 算法学习笔记(56): ...
- 《手把手教你》系列基础篇(九十)-java+ selenium自动化测试-框架设计基础-Logback实现日志输出-中篇(详解教程)
1.简介 上一篇宏哥介绍是如何使用logback将日志输出到控制台中,但是如果需要发给相关人需要你拷贝出来,有时候由于控制台窗口的限制,有部分日志将会无法查看,因此我们还是需要将日志输出到文件中,因此 ...
- 实践 - 搭建Redis一主两从三哨兵
实践 - 搭建Redis一主两从三哨兵 原因: 最近在复习Redis的时候,学习到了为了提高Redis集群的高可用性,有一个模式为哨兵模式.哨兵模式的作用是为了在主节点出现阻塞或者错误,无法接收数据的 ...
- 攻防世界-MISC:give_you_flag
这是攻防世界新手练习区的第四题,题目如下: 点击附件一下载,打开后发现是一个gif动图 可以看到动图有一瞬间出现了一个二维码,找一个网站给他分离一下 得到一张不完整的二维码(然后就不知道该怎么办了,菜 ...
- 谁动了我的主机? 之活用History命令
点击上方"开源Linux",选择"设为星标" 回复"学习"获取独家整理的学习资料! Linux系统下可通过history命令查看用户所有的历 ...
- pycham的安装、优化、使用
一.下载与安装 下载地址:https://confluence.jetbrains.com/display/PYH/Previous+PyCharm+Releases 注册:参考地址:http://i ...
- mysql外键,锁
mysql外键: 场景:用于建立两个表之间的联系,让A表中一个字段,可以在另一个表中字段值的范围去查找 注意事项: (1)被参照表和参照表字段属性必须一致 (2)参照表必须设置主键 (3)必须选择支持 ...
- 75. Sort Colors - LeetCode
Question 75. Sort Colors Solution 题目大意: 给一个数组排序,这个数组只有0,1,2三个元素,要求只遍历一遍 思路: 记两个索引,lowIdx初始值为0,highId ...