基于 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
});

（一）安装muse-ui相关推荐

Muse UI - 优雅的 Material Design 风格 UI 组件
一款基于 Vue 2.0 的 UI 组件库,按 Material Design 设计规范实现,体验优秀,使用简单. Muse UI 介绍 Muse UI 是一款基于 Vue.js 的优雅 UI 组件库 ...
Muse UI遇到的坑
写在前面:我只是一个前端小白,文章中的提到可能会有不足之处,仅提供一个参考.若有不完善的地方,欢迎各位大佬指出,希望对你有帮助! 故事背景是这样的,最近做一个Vue项目,使用到 Muse UI 组件库 ...
Vue安装element ui踩坑
在vue安装element ui 的过程中报了许多错误,慢慢踩坑,希望能帮到各位 1. 输入 vue add element 输入 y y zh-CN 如果报错 ERROR comman ...
Muse UI — 基于 Vue2.0 的 Material Design UI 库
Vue 2.0 发布以来,很多 vue 的开源项目都开始了升级计划,我也思考着 vue-carbon 的升级之路,9月开工,11月完工, Muse UI 闪亮登场. 先睹为快 Muse UI 主要用于 ...
semantic ui html5,Semantic UI ：安装 Semantic UI
对 Semantic UI 有兴趣可以参考宁皓网的 Semantic UI 课程包,订阅宁皓网就可以学习全部课程了. Semantic UI 是一套开源的 CSS 与 JavaScript 框架,提供 ...
安装Naive UI【包含自动导入常用组件】
官方安装地址: 安装 - Naive UI 1.npm安装Naive UI cnpm i naive-ui naive组件挺多的(超过80个组件),需要花一点时间去安装 2.创建ts文件,导入常用组件 ...
【Gazebo入门教程】第一讲 Gazebo的安装、UI界面、SDF文件介绍
[Gazebo入门教程]第一讲 Gazebo的安装.UI界面.SDF文件介绍文章目录 [Gazebo入门教程]第一讲 Gazebo的安装.UI界面.SDF文件介绍一.Gazebo的简介与安装 1. ...
Ubuntu安装Swagger UI
环境操作系统:Ubuntu 22.04 node 16.15.1 npm 8.11.0 安装Swagger UI 方法0:官网在线的 Swagge UI https://swagger.io/too ...
muse ui 的table组件的选择事件说明
muse ui是一套基于vue 2.0的ui组件,它的点击特效.组件模型等都特别适合移动端开发,今天在做一个移动项目是,用到里面的table组件,对其进行选择行操作,根据官方文档的提示一直不解.提示如 ...
Muse UI遇到的坑 1
写在前面:我只是一个前端小白,文章中的提到可能会有不足之处,仅提供一个参考.若有不完善的地方,欢迎各位大佬指出,希望对你有帮助! 故事背景是这样的,最近做一个Vue项目,使用到 Muse UI 组件库 ...

（一）安装muse-ui

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

1.1、通过npm 安装

1.1.1 安装cnpm

1.1.2 安装muse-ui

1.1.3 导入muse-ui

1.2 通过CDN导入

2 muse-ui的使用

2.1 完整引入

2.2 按需引入

3 muse-ui 的相关风格

3.1 字体 Typography

3.2 色彩 Color

在组件中使用Color:

Color 类使用:

（一）安装muse-ui相关推荐

最新文章

热门文章

（一） 安装muse-ui

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

1.1、 通过npm 安装

1.1.1 安装cnpm

1.1.2 安装muse-ui

1.1.3 导入muse-ui

1.2 通过CDN导入

2 muse-ui的使用

2.1 完整引入

2.2 按需引入

3 muse-ui 的相关风格

3.1 字体 Typography

3.2 色彩 Color

在组件中使用Color:

Color 类使用:

（一） 安装muse-ui相关推荐

最新文章

热门文章

（一）安装muse-ui

1.1、通过npm 安装

（一）安装muse-ui相关推荐