一、使用脚手架工具搭建项目框架

vue init webpack muse (使用vue创建一个muse新项目)

cd muse

npm install

npm run dev (测试一下是否成功)

二、安装额外dependency

npm install --save muse-ui （安装muse-ui）

npm install style-loader （因为需要引入muse-ui定义的css）

在build文件夹上的webpack.base.conf.js中添加

{

test: /\.css$/,

loader: 'style-loader!css-loader',

},

三、额外资源依赖

由于需要引入Google相关资源，需要现将资源下载到本地

https://fonts.gstatic.com/s/materialicons/v28/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2点此下载字体资源改名icon.woff2

https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/material-icons.css下载好css文件

将上述两个文件放到muse/src/assets目录下

打开上述css，src修改成下述，并测试是否出错

@font-face {

font-family: 'Material Icons';

font-style: normal;

font-weight: 400;

src: local('Material Icons'),

local('MaterialIcons-Regular'),

url(icon.woff2) format('woff2');

}

继续在webpack.base.conf.js中添加

{

test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,

loader: 'file-loader'

},

四、使用

在main.js中进行引用

import MuseUI from 'muse-ui'

import 'muse-ui/dist/muse-ui.css'

import './assets/material-icons.css'（字体样式，这时候就可以随意添加字体到你的项目里面了）

Vue.use(MuseUI)

完整使用MuseUI

import Vue from 'vue'

import App from './App'

import router from './router'

import MuseUI from 'muse-ui'

import 'muse-ui/dist/muse-ui.css' // 加载样式

import './assets/material-icons.css'

Vue.use(MuseUI)

Vue.config.productionTip = false

new Vue({

el: '#app',

router,

template: '',

components: { App }

})

最后看看是否引入成功！以下是我应用的效果😋

底部导航条