一、使用脚手架工具搭建项目框架
- 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相关资源，需要现将资源下载到本地
- 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)
