（一） 安装muse-ui

基于 Vue 2.0 优雅的 Material Design UI 组件库

1、 muse-ui的两种安装方式

1.1、 通过npm 安装

推荐使用 npm 的方式安装，以便更好的和打包工具（webpack）配合使用

由于国内网络原因，可使用淘宝镜像：cnpm。

1.1.1 安装cnpm

npm i -g cnpm --registry=https://registry.npm.taobao.org

1.1.2 安装muse-ui

值得注意的是，在vue项目中导入muse-ui时，最好在vue项目的根目录中使用安装命令。

cnpm i muse-ui -S

1.1.3 导入muse-ui

在安装完成muse-ui之后，在项目中将muse-ui添加到main.js即可使用。

import MuseUI from 'muse-ui';
import 'muse-ui/dist/muse-ui.css';
 
Vue.use(MuseUI);

1.2 通过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>

目前可以通过https://unpkg.com/muse-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

2 muse-ui的使用

muse-ui 支持完整引入或者根据需要引入部分组件。 我们先介绍如何完整引入 muse-ui。

2.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.2 按需引入

借助babel-plugin-import , 我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-import, less-loader:

cnpm 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);

3 muse-ui 的相关风格

3.1 字体 Typography

Material Design 推荐使用 Roboto 字体，可以通过 CDN 和 npm 两种方式安装：

通过 CDN 引入，但是由于国内网络原因，还是推荐使用cnpm安装使用。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">

通过cnpm安装使用。

npm install typeface-roboto --save

import 'typeface-roboto'

3.2 色彩 Color

Muse-UI 中所有组件的 color 或者 *-color 属性，都可以使用 primary, secondary, success, warning, info, error, 或者 Material Design 规范中的所有色彩名称。

在组件中使用Color:

<mu-button class="demo-color-btn" color="primary"> primary </mu-button>
<mu-button class="demo-color-btn" color="success"> success </mu-button>
<mu-button class="demo-color-btn" color="indigo400"> indigo400 </mu-button>
<mu-button class="demo-color-btn" color="#1565c0"> Custom </mu-button>
<style>
.demo-color-btn {
  margin: 8px;
}
</style>

Color 类使用:

Muse-UI Color 类，定义了 Material Design 规范的中所有的色彩。

import theme from 'muse-ui/lib/theme';
import * as colors from 'muse-ui/lib/theme/colors';

theme.add('custom-theme', {
  primary: colors.indigo,
  secondary: colors.pinkA200
});