【Vue】引入第三方组件（Layui）

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

1. 在Layui官网下载文件

Layui官网

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

3. 在index.html中引入

<link type="text/css" rel="stylesheet" href="static/layui/css/layui.css"/>
<script type="text/javascript" src="static/layui/layui.js"></script>

4. 在需要使用的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>