一、安装
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
这两步做完你就开始写你的代码了
