前言
用過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>
運行截圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/234925.html
標籤：其他