MuseUI-UI的使用

一、使用脚手架工具搭建项目框架

• 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)

参考文章

• http://www.jianshu.com/p/3f47f3db6dd6