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

前言

用过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可加可不加,因为这个是前后端交互要用到的。大家懂得就好,不懂得可以不深究。不在 这次 主题范围内。

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

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

    
    <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也可以也可以直接挂载

  	
    <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的人,这些东西还是知道的。如果不懂的人,那么你可以直接去学学,毕竟最近几年很火的一个 前端框架的一点基础知识。

总体代码


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

    
    <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>


    
    <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>

运行截图

HTML如何引入EL和Layui框架(附上代码和实现)_第1张图片

你可能感兴趣的:(前端,html)