KgoUI（2）之 vue + layui

框架源代码：码云我接触layui 已经快2年多了（Layui刚出的时候我就开始关注了），vue 和 layui并不是天生一对，elementui 和vue配合更加亲密无间。我认为layui的弹层layer是当前前端最好的弹层。这里依旧选择layui的原因：1）layui确实很漂亮和优秀。2）对layui的情怀（用vue封装一套layui组件，是我一直想做的，工作中...

keep-go-on

10169人浏览 · 2018-11-23 15:40:07

keep-go-on · 2018-11-23 15:40:07 发布

框架源代码：码云

我接触layui 已经快2年多了（Layui刚出的时候我就开始关注了），vue 和 layui并不是天生一对，elementui 和vue配合更加亲密无间。我认为layui的弹层layer是当前前端最好的弹层。

这里依旧选择layui的原因：

1）layui确实很漂亮和优秀。

2）对layui的情怀（用vue封装一套layui组件，是我一直想做的，工作中已经有了实操经验，但是总数因为各种工作中对技术的限制不能让我自由发挥，这个计划一直搁置了。）

3）只认为对layui框架比较熟悉。

3）KgoUI只是前端框架，后端框架很多地方为layui做过一下开发，想继续延后。

好的，开始集成（其实两句好就说完了,直接上代码）

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="./static/layui/css/layui.css"/>
    <script src="./static/layui/layui.all.js"></script>
    <title>kgoui</title>
  </head>
  <body>
      <style>
        html ,body{
          height: 100%;
          width: 100%;
          padding: 0;
        }
      </style>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

layui位置：

这里引用layui.all.js 原因是使用vue路由，整个框架是个单页系统（至少绝大部分是单页），模块一次加载完，不需要在初始化模块了。

另外也可以在main.js 中加载layui，但是我感觉这个是最简单的使用方式。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^