具体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版本。
10 个评论
要回复文章请先登录或注册
rem486
晴天飘鱼
1***@qq.com
evcardxx
amourz
c***@163.com
小明哥哥 (作者)
小明哥哥 (作者)
c***@163.com
henthens