一喳瓣、使用腳手架工具搭建項(xiàng)目框架
vue init webpack muse (使用vue創(chuàng)建一個(gè)muse新項(xiàng)目)
cd muse
npm install
npm run dev (測(cè)試一下是否成功)
二欣福、安裝額外dependency
npm install --save muse-ui （安裝muse-ui）
npm install style-loader （因?yàn)樾枰雖use-ui定義的css）
在build文件夾上的webpack.base.conf.js中添加
{
test: /\.css$/,
loader: 'style-loader!css-loader',
},
三替饿、額外資源依賴
由于需要引入Google相關(guān)資源语泽，需要現(xiàn)將資源下載到本地
https://fonts.gstatic.com/s/materialicons/v28/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2點(diǎn)此下載字體資源改名icon.woff2
https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/material-icons.css下載好css文件
將上述兩個(gè)文件放到muse/src/assets目錄下
打開上述css，src修改成下述视卢，并測(cè)試是否出錯(cuò)
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(icon.woff2) format('woff2');
}
繼續(xù)在webpack.base.conf.js中添加
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
},
四踱卵、使用
在main.js中進(jìn)行引用
import MuseUI from 'muse-ui'
import 'muse-ui/dist/muse-ui.css'
import './assets/material-icons.css'（字體樣式，這時(shí)候就可以隨意添加字體到你的項(xiàng)目里面了）
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 }
})
最后看看是否引入成功据过！以下是我應(yīng)用的效果??
