vue开发 —— 结合Muse-UI

老板，来杯猫屎咖啡，哦，抱歉，是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>