HTML如何引入EL和Layui框架(附上代码和实现)

前言用过Vue的人都知道，建立起来麻烦，要是没学好，还觉得哪哪都不好改，出来一个bug还不知道怎么去理解…但是呢？el这种框架(饿了吗出品)又是基于Vue开发的，在Vue里面引用教程一大堆，但是在html中引入就稀奇古怪的。本人百度了很久也没人讲明白。所以写了篇博客讲一讲怎么EL和Layui框架在 html中用起来啊！（主要讲el，Layui随便调用的顺带一下）添加挂载element-ui是饿了么

专注学习java

3902人浏览 · 2020-12-13 18:00:39

专注学习java · 2020-12-13 18:00:39 发布

前言

用过Vue的人都知道，建立起来麻烦，要是没学好，还觉得哪哪都不好改，出来一个bug还不知道怎么去理解…但是呢？el这种框架(饿了吗出品)又是基于Vue开发的，在Vue里面引用教程一大堆，但是在html中引入就稀奇古怪的。本人百度了很久也没人讲明白。

所以写了篇博客讲一讲怎么EL和Layui框架在 html中用起来啊！（主要讲el，Layui随便调用的顺带一下）

添加挂载

element-ui是饿了么团队基于Vue开发的组件库，所以若要直接在html中使用，需要挂载vue的js文件。

 <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

下面这个axios可加可不加，因为这个是前后端交互要用到的。大家懂得就好，不懂得可以不深究。不在这次主题范围内。

 	<!--		引入axios-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>

使用element-ui也可以也可以直接挂载

    <!-- 引入el框架 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

使用Layui也可以也可以直接挂载

  	<!--    引入Layui-->
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>

el注意的点(重要)

然后懂一个东西：在前言里面我也讲了：el这种框架(饿了吗出品)又是基于Vue开发的，所以要将el用到的东西用Vue封装一下，不然会直接用不了。效果出不来。

看代码如何封装

<div id="bigBox">
    这是El框架使用：<el-button type="primary" icon="el-icon-search">搜索</el-button>
</div>
<script>
    var bigBox = new Vue({
        el: "#bigBox",
        data: {
            username: '',
            password: ''
        }
    })
</script>

如果学过Vue的人，这些东西还是知道的。如果不懂的人，那么你可以直接去学学，毕竟最近几年很火的一个前端框架的一点基础知识。

总体代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <!--		引入vue-->
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入element 的组件库-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>


    <!--    引入Layui-->
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>

</head>
<body>

<div id="bigBox">
    这是El框架使用：<el-button type="primary" icon="el-icon-search">搜索</el-button>
</div>

<h></h>
这是layui框架：<button type="button" class="layui-btn layui-btn-danger">警告按钮</button>

<script>
    var bigBox = new Vue({
        el: "#bigBox",
        data: {
            username: '',
            password: ''
        }
    })
</script>
</body>
</html>

运行截图

在这里插入图片描述

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}$/, //不连续的两位字母// /^