給你的 MuseUI 應用新增字型、樣式

byteblogs發表於2019-03-05
UI

一、使用腳手架工具搭建專案框架
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 }

})
轉載 http://www.51csdn.cn/article/182.html

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章