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相关资源,需要现将资源下载到本地

  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)

参考文章

推荐阅读更多精彩内容

  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 6,524评论 0 17
  • 一、使用脚手架工具搭建项目框架 vue init webpack muse (使用vue创建一个muse新项目) ...
    zoepasserby_阅读 1,411评论 0 0
  • 目录第1章 webpack简介 11.1 webpack是什么? 11.2 官网地址 21.3 为什么使用 web...
    lemonzoey阅读 978评论 0 1
  • webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert阅读 5,032评论 2 72
  • 是什么契机让自己参加了这个活动? 自己总是没有形成好习惯,各种方法都用过。就是找不到深层次的原因,但是感觉有障碍。...
    进化2016阅读 145评论 0 0