webpack配置mui

[Wscats]

从mui官网下载mui

• Github仓库

目录结构

main.js

然后可以把mui保存在全局的window对象里面，就像jQuery的配置一样

require("./mui/css/mui.css")
window.mui = require("./mui/js/mui.js")

然后你就可以写一个mui样式的组件，例如下面的例子

<template>
    <div>
        <!--下拉刷新容器-->
        <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll">
                <!--数据列表-->
                <ul class="mui-table-view mui-table-view-chevron">

                </ul>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        replace: false,
        data() {
            return {}
        },
        methods: {},
        components: {},
        mounted() {
            mui.init({
                pullRefresh: {
                    container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
                    down: {
                        height: 50, //可选,默认50.触发下拉刷新拖动距离,
                        auto: true, //可选,默认false.自动下拉刷新一次
                        contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
                        contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
                        contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
                        callback: function () {
                            mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
                            console.log("hello")
                        } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                    }
                }
            });
        },
        directives: {
        }
    }
</script>

在引入mui.css时候，注意要配置ttf格式的加载器(例如file-loader,css-loader和style-loader)

webpack.config.js

{
    test: /\.eot/,
    loader: 'file-loader?prefix=font/'
}, {
    test: /\.woff/,
    loader: 'file-loader?prefix=font/&limit=10000&mimetype=application/font-woff'
}, {
    test: /\.ttf/,
    loader: 'file-loader?prefix=font/'
}, {
    test: /\.svg/,
    loader: 'file-loader?prefix=font/'
}

如果报arguments.callee这个错误，因为ES5在默认严格模式下已经不建议这个用法，所以我们可以给class.extend赋一个带名字的函数，然后Class.extend = Fn，然后注释Class.extend = arguments.callee

Class.extend = function Fn(prop) {
	//code...
	//Class.extend = arguments.callee;
	Class.extend = Fn;
	return Class;
};