本文共 1237 字，大约阅读时间需要 4 分钟。

一、安装

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

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

转载地址：https://maomin.blog.csdn.net/article/details/99410542 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！