一、使用腳手架工具搭建專案框架

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相關資源，需要現將資源下載到本地

將上述兩個檔案放到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 }

})