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

原创

Vam的金豆之路 2022-03-08 14:36:54 博主文章分类：Vue.js ©著作权

文章标签 css ico ide 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者Vam的金豆之路的原创作品，请联系作者获取转载授权，否则将追究法律责任

一、安装

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
    }]
  ]
}

比如引入的是 Button 和 Select，接下来我们在main.js文件里加入以下代码：

import Vue from 'vue';
import 'muse-ui/lib/styles/base.less';
import { Button, Select } from 'muse-ui';
import 'muse-ui/lib/styles/theme.less';

Vue.use(Button);
Vue.use(Select);

这是参考的全部组件表：

Alert,
  AppBar,
  AutoComplete,
  Avatar,
  Badge,
  BottomNav,
  BottomSheet,
  Breadcrumbs,
  Button,
  Card,
  Checkbox,
  Chip,
  DateInput,
  DataTable,
  Dialog,
  Divider,
  Drawer,
  ExpansionPanel,
  Form,
  Grid,
  GridList,
  Helpers,
  Icon,
  List,
  LoadMore,
  Menu,
  Pagination,
  Paper,
  Picker,
  Popover,
  Progress,
  Radio,
  Select,
  SlidePicker,
  Slider,
  Snackbar,
  Stepper,
  SubHeader,
  Switch,
  Tabs,
  TextField,
  Tooltip,
  theme