vue项目中怎么引入weui及在vue中weui的简单使用
方案一:main.js中引入(1)、安装weui.js weui样式npm install weui.js weui -S(2)、引入weui.js weui样式import Vue from 'vue'import weui from 'weui.js'import 'weui'Vue.prototype.$weui = weui(3)、项目中就可以用weui...
方案一:main.js中引入
(1)、安装weui.js weui样式
npm install weui.js weui -S
(2)、引入weui.js weui样式
import Vue from 'vue'
import weui from 'weui.js'
import 'weui'
Vue.prototype.$weui = weui
(3)、项目中就可以用weui的样式以及组件了,用法如下:
this.$weui.dialog({
title: '提示',
content: '是否领取礼品',
buttons: [{
label: '取消',
type: 'default',
onClick: () => {
alert('您已取消领取礼品!')
}
}, {
label: '确定',
type: 'primary',
onClick: () => {
alert('您已确定领取礼品!')
}
}]
})
方案二:index.html中引入
(1)下载资源weui.min.js,weui.min.css
(2)在index.html中引入weui.min.js,weui.min.css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>hhhhh</title>
<link rel="stylesheet" href="./static/css/weui.min.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src='./static/js/weui.min.js'></script>
</body>
</html>
(3)在webpack.base.conf.js中配置externals
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
// 配置完该选项,webpack在打包的时候 将不再把weui的相关资源打包进app.css和vendor.js
externals: {
'weui': 'weui',
'weui.js': 'weui.js'
},
....
}
(4)在项目中就可以用weui.组件名
weui.loading()
// 打包时会报错,因为没有引入,你用还不存在的对象当然会报错,
// 不过打包后的项目是可以正常使用的,如下图
不过打包后的项目里是正常的
要想在项目中不报错,可以先在main.js里引入一下
import Vue from 'vue'
//这里引入不引入其实也没有关系,只是如果不引入,代码上还是会报错的
import weui from 'weui.js'
// import 'weui' 不用再引入weui的样式了
Vue.prototype.$weui = weui
// 以上就可以在项目中使用
this.$weui.loading()
(5)要注意的是,如果引入的外部资源在本地(weui.min.js,weui.min.css在本地)打包后生成的文件夹里没有该文件,需要将这两个文件根据自己写的路径放到对应的文件夹里,如果用的cdn,那正常打包就OK了
————————————————
版权声明:本文为CSDN博主「rainbow8300」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/rainbow8300/article/details/88018542
更多推荐
所有评论(0)