一穗慕、使用腳手架工具搭建項目框架
- vue init webpack-simple muse (會新建個muse文件夾)
- cd muse
- npm install
- npm run dev (測試一下是否成功)
二井佑、安裝額外dependency
- npm install --save muse-ui :安裝muse-ui
- npm install style-loader -D :因為需要引入muse-ui定義的css刊头，所以需要
- 在webpack.config.js中添加
{ test: /\.css$/, loader: 'style-loader!css-loader', }
三粗合、額外資源
由于需要引入Google相關(guān)資源，需要現(xiàn)將資源下載到本地
- https://fonts.gstatic.com/s/materialicons/v28/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2 點此下載字體資源
- https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/material-icons.css 下載好css文件
- 將上述兩個文件放到
muse/src/assets目錄下 - 打開上述css幅垮，
src修改成下述
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(icon.woff2) format('woff2') /*icon.woff2是下載下來的字體文件名稱*/
/* url(MaterialIcons-Regular.woff) format('woff'), */
/* url(MaterialIcons-Regular.ttf) format('truetype'); */
- 在
webpack.config.json中添加
{
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)
