【Vue】引入第三方组件(Layui)
关于Vue引入第三方组件的方式有很多,但测试过很多方式都不可行。我的需求是在使用Vue脚手架搭建的项目中引入Layui这个前端框架,方式有两种,第一种是使用npm导入,第二种拷贝Layui文件夹(js和css)。关于第一种方式,我在百度上找了很多种方法,但是都出现引用组件未定义的问题。在此我记录下可行的第二种方式。在Layui官网下载文件将其复制到static目录下在index....
·
关于Vue引入第三方组件的方式有很多,但测试过很多方式都不可行。我的需求是在使用Vue脚手架搭建的项目中引入Layui这个前端框架,方式有两种,第一种是使用npm导入,第二种拷贝Layui文件夹(js和css)。关于第一种方式,我在百度上找了很多种方法,但是都出现引用组件未定义的问题。在此我记录下可行的第二种方式。另外,我觉得第二种方式比较灵活,因为可以对组件进行修改来满足需求。
- 在Layui官网下载文件
-
将其复制到Vue项目的static目录下
-
在index.html中引入
<link type="text/css" rel="stylesheet" href="static/layui/css/layui.css"/>
<script type="text/javascript" src="static/layui/layui.js"></script>
- 在需要使用的VUE文件中引入
<script src="./../static/layui/layui.js"></script>
<script>
export default {
name: 'UserList',
mounted () {
layui.use('form', function () {
var form = layui.form
// 监听提交
form.on('submit(formDemo)', function (data) {
layer.msg(JSON.stringify(data.field))
return false
})
})
}
}
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)