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

末蓝、 2021-10-01 03:10 123阅读 0赞

## 一、安装 ##

1、**npm安装**

npm i muse-ui -S

或者

**CDN安装**

2、**字体安装**

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

3、**字体图标**

这里必须先引入图标，才可以显示图标。

## 二、引入使用 ##

**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

这两步做完你就开始写你的代码了