一、使用脚手架工具搭建项目框架
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 }
})
最后看看是否引入成功！以下是我应用的效果😋
