vue-cli 使用 Layui 入门_vue+layuimini-优快云博客

本文链接：https://blog.youkuaiyun.com/zjsfdx/article/details/87932679

layui是一款遵循原生HTML/CSS/JS编写的前端UI框架，门槛低，适合界面快速开发。它兼容主流浏览器，提供丰富的组件，特别适合服务端程序员使用。本文介绍如何在Vue项目中使用layui，包括安装、引入及进度条组件的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

效果如下：
在这里插入图片描述