小明哥哥
小明哥哥
  • 发布:2017-06-13 10:19
  • 更新:2018-12-18 14:34
  • 阅读:23280

分享如何将mui.js整合进vue项目

分类:MUI

具体vue项目创建不介绍了,你可以按照你的心情创建单/多入口文件的vue项目。
重点是如何整合mui.js
大神自有办法,不用我置喙,这里主要写给想用vue,又想把时间花费在业务上的小伙伴。

打包工具用的webpack。这里示例用的是SPA单页面文件,其实没有影响,随你心情

第一步,配置webpack


module.exports = {  
    entry: {  
        app: './src/main.js'  
    },  
    output: {  
        ...  
    },  
    externals: {  
        mui: 'mui'  
    },  
    .....

如果像我一样单页面,只有一个index.html。直接可以用html打包插件,
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),

第二步 正常编写基础逻辑

<!DOCTYPE html>  
<html>  

<head>  
    <meta charset="utf-8">  
    <title>jmapp</title>  
    <link rel="stylesheet" href="http://dev.dcloud.net.cn/mui/dist/css/mui.min.css">  

</head>  

<body>  
    <div id="app"></div>  
    <!-- built files will be auto injected -->  
    <script src="http://dev.dcloud.net.cn/mui/dist/js/mui.min.js">  
    </script>  
    <script>  
        mui.init();  
        mui.plusReady(function() {  
        });  
    </script>  
</body>  

</html>

第三部,vue工程里正常直接使用,无须引用

methods: {  

    login() {  
      if (this.user.length < 1) {  
        mui.alert("roshan")  
      }  
    }  
  }

说到底就是

externals: {  
        mui: 'mui'  
    },

只有这一句话有作用。

因为mui使用了匿名递归不能直接require 自然也不能用amd方式加载到es6代码中,vue的严格模式下会报错。
变通方法就是自己引入。。。。。。

希望mui源码转向es6版本。

6 关注 分享
DCloud_UNI_CHB lhyh Trust c***@163.com i丁一 晴天飘鱼

要回复文章请先登录注册

rem486

rem486

回复 晴天飘鱼 :
你好,请问是怎么调用的呢?
2018-12-18 14:34
晴天飘鱼

晴天飘鱼

如果要在组件中怎么调用plus
2018-05-16 10:58
1***@qq.com

1***@qq.com

因为mui使用了匿名递归不能直接require ;;这句话什么意思呢?因为用了匿名递归所以导致不能用require?
2018-03-07 14:19
evcardxx

evcardxx

externals: {
mui: 'window.mui'
},
改成这样吧,然后在js里可就可以引入 了
import mui from 'mui'
2017-11-29 16:54
amourz

amourz

不行啊,报错误:mui is not defined 。而且如楼上说得,我要引入本地css该怎么办呢?
2017-09-25 13:54
c***@163.com

c***@163.com

回复 小明哥哥 :
请问evalJS怎么引用
2017-07-14 09:55
小明哥哥

小明哥哥 (作者)

回复 henthens :
不需要npm安装mui 直接放到index.html能引入的位置就可以。放在哪不重要。
2017-07-14 08:55
小明哥哥

小明哥哥 (作者)

回复 c***@163.com :
index.html里面引入,或者webpack里面引入。。我只是懒得下载。。
2017-07-14 08:54
c***@163.com

c***@163.com

如果我想引入本地css文件,怎么引入
2017-07-12 16:09
henthens

henthens

我不是用npm安装阿德mui而是直接把mui.js放在SRC目录下面也可以像你说的这样引入吗
2017-07-12 12:00