vue-cli+webpack项目里如何引入Mui

目录结构

• app
  • index.js
  • app.js
  • mui.js
  • jquery.js
• bulid
• webpack.config.js

webpack.config.js

var path = require('path');  
// 定义几个路径  
var ROOT_PATH = path.resolve(__dirname); //__dirname是文件所在的目录  
var APP_PATH = path.resolve(ROOT_PATH, 'app');  
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');  

module.exports = {  
    entry: APP_PATH, //这里默认会找index.js，如果需要指定的话，再后面继续拼路径即可；  
    output: {  
        path: BUILD_PATH,  
        filename: 'app.js'  
    },  
    resolve: {  
        alias: {  
            mui: path.resolve(ROOT_PATH, 'app/mui.js'),  
            jquery: path.resolve(ROOT_PATH, 'app/jquery.js')  
        }  
    }  
};

在app.js中引入mui或jquery

import mui from 'mui';  
import jquery from 'jquery';

build

$ webpack

结果截图

完整最简工程附上

1.使用 webpack/babel 来打包, 请将 mui 文件排除, 避免 babel 二次打包引起的错误
在.babelrc 中可如下配置 (没有 .babelrc 文件可以在根目录下新建一个)

{  
  "ignore": [  
    "./src/assets/js/mui.js"  
  ]  
}

2.引入方法：webpack 中可以如下配置：

// webpack.config  
{  
  // ...  
  module: {  
    loaders: [{  
      test: require.resolve(assetDir+'/js/mui.js'), //mui目录  
      loader: 'exports-loader?window.mui!script-loader'//全局注入mui  
    }]  
  }  
}

这样我们在页面文件中就可以直接引入啦：

import mui from 'asset/js/mui'; // 绝对路径

报什么错？全局没有mui对象？

webpack中引入这种第三方库，网上很多方法。可以搜“webpack引入jQuery”，这种关键词。

常规的方法是直接引入

resolve: {  
    alias: mui: path.resolve(__dirname, 'app/mui.js')  
}

其它模块中导入

import mui from 'mui';

也可以调整mui的源码，将mui对象作为一个模块导出。

module.exports = mui;

我也遇到这个问题了，vue-cli+webpack项目里如何引入Mui，我每次只要一引入就会报错

Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

我的是报这个错，我是直接把mui.js放在SRC目录下面的js文件夹里面的，然后我在需要用到的组件中用的import mui from '../../common/js/mui.min.js'这样的方式引入，然后就报上面的错，我用npm安装了一个
exports-loader还是报这个错，我要怎样才能正确用mui啊

跟jquery一样在引入方式：
【build/webpack.base.conf.js】里配置
alias: {
"jquery": path.resolve(dirname, '../static/js/jquery-1.11.1.min.js'),
"mui" : path.resolve(dirname, '../static/js/mui.min.js')
}

jquery引用：import $ from 'jquery'
mui引用：import mui from 'mui'

直接报错(jquery引入正常)：
[HMR] bundle has 1 errors
client.js?d90c:161 ./src/main.js
Module not found: Error: Can't resolve 'mui' in 'E:\WORKDOC\workspace\kyee\src'
@ ./src/main.js 10:0-22
@ multi ./build/dev-client ./src/main.js

用vue做的app吗？ 还没试过 ，是使用 h5+ 就一个webview html当主页，然后所有的都是用vue 组件？在这个页面里使用router，路由返回，ajax会重新请求，怎么处理。刚用没多久

mui.min.js?2c9c:7 Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them  
    at Function.d.extend (mui.min.js?2c9c:7)  
    at eval (mui.min.js?2c9c:7)  
    at eval (mui.min.js?2c9c:7)  
    at Object.<anonymous> (index.js?cf7f4c7…:1147)  
    at __webpack_require__ (index.js?cf7f4c7…:660)  
    at fn (index.js?cf7f4c7…:86)  
    at eval (20:6)  
    at Object.<anonymous> (index.js?cf7f4c7…:840)  
    at __webpack_require__ (index.js?cf7f4c7…:660)  
    at fn (index.js?cf7f4c7…:86)

有弄好的模板吗