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

2022-06-02 11:35:37 浏览数 (2)

一、安装

1、npm安装

npm i muse-ui -S

或者

CDN安装

代码语言:javascript复制
<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、字体安装

代码语言:javascript复制
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

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

3、字体图标

代码语言:javascript复制
<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

0 人点赞