关于Vue引入第三方组件的方式有很多,但测试过很多方式都不可行。我的需求是在使用Vue脚手架搭建的项目中引入Layui这个前端框架,方式有两种,第一种是使用npm导入,第二种拷贝Layui文件夹(js和css)。关于第一种方式,我在百度上找了很多种方法,但是都出现引用组件未定义的问题。在此我记录下可行的第二种方式。另外,我觉得第二种方式比较灵活,因为可以对组件进行修改来满足需求。

  1. 在Layui官网下载文件

Layui官网

  1. 将其复制到Vue项目的static目录下

  2. 在index.html中引入

<link type="text/css" rel="stylesheet" href="static/layui/css/layui.css"/>
<script type="text/javascript" src="static/layui/layui.js"></script>
  1. 在需要使用的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>
Logo

前往低代码交流专区

更多推荐