layui（諧音：類UI) 是一款採用自身模塊規範編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細節都經過精心雕琢，非常適合界面的快速開發。layui 首個版本發佈於2016年金秋，她區別於那些基於 MVVM 底層的 UI 框架，卻並非逆道而行，而是信奉返璞歸真之道。準確地說，她更多是爲服務端程序員量身定做，你無需涉足各種前端工具的複雜配置，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這裏信手拈來(摘自官方文檔)。
兼容性和麪向場景
layui 兼容人類正在使用的全部瀏覽器（IE6/7除外），可作爲 PC 端後臺系統與前臺界面的速成開發方案。
npm 安裝Layui，使用vue-cli腳手架
我們先下載文件包，然後在html文件中用link和script標籤的方式引入
下載的文件包必須放在static文件中
html代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>demo</title>
<link rel="stylesheet" href="./static/layui/css/layui.css">
<script src="./static//layui/layui.js"></script>
<style>
body,html{
margin: 0;
padding: 1;
}
</style>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
要使用的組件：
進度條 - 頁面元素
<template>
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="10%"></div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted () {
// 注意進度條一欄element模塊，否則無法進行正常渲染和功能操作
layui.use('element',function(){
var element = layui.element
})
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
效果如下：
