第一步：

在layui官网中下载文件包：Layui - 经典开源模块化前端 UI 组件库

第二步：

把layui文件包解压出来的layui放到vue项目的静态文件目录（与index.html同级目录）：

第三步： 

在index.html中引入layui文件

 

<link rel="stylesheet" href="./layui/css/layui.css">
<script src="./layui/layui.js"></script>

第四步：

在组件中使用

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <input type="text" id="date">
  </div>
</template>
<script>
export default {
  mounted() {
    this.$nextTick(() => {
      const layui = window.layui; // 在文件中导入layui模块
      // 按需使用layui中的模块  （模块使用自行参考layui官方文档）
      layui.use(["laydate","layer"], () => {
        const layer = layui.layer; // 使用提示框模块
        layer.msg('test')
        // 使用layui日期组件
        const laydate = layui.laydate;
        laydate.render({
          elem: "#date",
          range: "~",
          done: (value, date, endDate) => {
            console.log(value); //得到日期生成的值，如：2017-08-18
            console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
            console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
          }
        });
      });
    })
  }
}
</script>

最后可正常使用