老板，来杯猫屎咖啡，哦，抱歉，是Muse咖啡
前序：
- 国内官网链接：Muse-UI
- 本章主要是拿Muse-UI的一些控件组合成一个界面，仅此而已的demo
- Muse-UI（本文当前版本号：3.0.1）
- 任何想复制就想运行的，请不要看下去了，此文贴代码仅仅为了省去一些繁琐事，以便诸位更多思考时间花在实际有用的地方
一：步骤：
1. 打开模板项目，在终端输入以下命令，安装Muse-UI到项目中
npm i muse-ui -S
2. 在main.ts里面全局引入muse-ui ，修改的代码如下：
import Vue from "vue";
import App from "./App.vue";
import MuseUI from 'muse-ui';
import 'muse-ui/dist/muse-ui.css';
Vue.config.productionTip = false;
Vue.use(MuseUI);
new Vue({
render: h => h(App)
}).$mount("#app");
3. muse-ui 中示例的图标采用的是谷歌的Material Design Icons字体，官网的cdn地址很慢，故需要缓存到本地，（若觉得图标不符合，也是可以自定义图标的，此次暂默认使用官方标配），首先是下载官网给出的 material-icons.css，然后根据css里面的字体地址下载字体到本地，最后需要在main.ts引用material-icons.css，其实这段css也是可以放在app.vue里面的，这得看各位习惯了。css里面的字体地址为
https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/ +【字体名称】
例：https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/MaterialIcons-Regular.woff2
material-icons.css 3.0.1 代码如下：
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(MaterialIcons-Regular.woff2) format('woff2'),
url(MaterialIcons-Regular.woff) format('woff'),
url(MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
material-icons.css 3.0.1 修改后的代码如下：
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
/* 路径需要写自己真实存放的地方 */
src:url(MaterialIcons-Regular.woff2) format('woff2'),
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
main.ts 修改后代码：
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import MuseUI from 'muse-ui';
import 'muse-ui/dist/muse-ui.css';
//需要注意这里的文件位置，按自己喜好修改，切勿复制了事
import './assets/css/material-icons.css'
Vue.use(MuseUI);
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
3. 在 App.vue 里面添加 顶部导航条、卡片、底部导航，修改的代码如下：
<template>
<div id="app">
<!-- 顶部导航条 -->
<mu-appbar style="width: 100%;" color="primary">
<mu-button icon slot="left">
<mu-icon value="menu"></mu-icon>
</mu-button>潇风易水
<mu-button flat slot="right">LOGIN</mu-button>
</mu-appbar>
<!-- 内容 -->
<mu-container>
<mu-card style="width: 100%; max-width: 375px; margin: 0 auto;">
<mu-card-header title="Myron Avatar" sub-title="sub title">
<mu-avatar slot="avatar">
<img src="../src/assets/images/1.png" />
</mu-avatar>
</mu-card-header>
<mu-card-media title="Image Title" sub-title="Image Sub Title">
<img src="../src/assets/images/1.png" />
</mu-card-media>
<mu-card-title title="Content Title" sub-title="Content Title"></mu-card-title>
<mu-card-text>
散落在指尖的阳光，我试着轻轻抓住光影的踪迹，它却在眉宇间投下一片淡淡的阴影。
调皮的阳光掀动了四月的心帘，温暖如约的歌声渐起。
似乎在诉说着，我也可以在漆黑的角落里，找到阴影背后的阳光，
找到阳光与阴影奏出和谐的旋律。我要用一颗敏感赤诚的心迎接每一缕滑过指尖的阳光！
</mu-card-text>
<mu-card-actions>
<mu-button flat>Action 1</mu-button>
<mu-button flat>Action 2</mu-button>
</mu-card-actions>
</mu-card>
</mu-container>
<!-- 底部导航 -->
<mu-container>
<mu-bottom-nav>
<mu-bottom-nav-item title="Recents" icon="restore"></mu-bottom-nav-item>
<mu-bottom-nav-item title="Favorites" icon="favorite"></mu-bottom-nav-item>
<mu-bottom-nav-item title="Nearby" icon="location_on"></mu-bottom-nav-item>
</mu-bottom-nav>
</mu-container>
</div>
</template>
<style lang="less">
</style>
