Layui - Vue 前端UI框架的调用

沃梦达教程前端开发

2025-01-14

Layui Vue是一套Vue 3.0桌面组件库，遵循Layuivue经典的设计规范，开箱即用。2022年Layui Vue发布了1.0版本，2023年发布了基于Vue 3的2.0版本。它是一个UI组件库，使用简单，稳定可靠，设计经典。

使用npm工具安装layui vue

npm install @layui/layui-vue --save

全局注册到 Vue

import App from './App.vue'
import { createApp } from 'vue'
import Layui from '@layui/layui-vue'
import '@layui/layui-vue/lib/index.css' // 样式需要单独引入

createApp(App).use(Layui).mount('#app')

按需引入

import App from './App.vue'
import { createApp } from 'vue'
import { LayButton, LayTable } from '@layui/layui-vue'
import '@layui/layui-vue/es/button/index.css';
import '@layui/layui-vue/es/table/index.css';

var app = createApp(App).

app.component("LayButton", LayButton);
app.component("LayTable", LayTable);

app.mount('#app')

Layui – Vue直接引入

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="//unpkg.com/@layui/layui-vue/lib/index.css" />
  <script src="//unpkg.com/vue@3"></script>
  <script src="//unpkg.com/@layui/layui-vue"></script>
</head>
<body>
  <div id="app">
    <lay-button type="primary">{{ message }}</lay-button>
  </div>
  <script>
    const App = {
      data() {
        return {
          message: "Hello World"
        };
      },
    };
    const app = Vue.createApp(App);
    app.use(LayuiVue);
    app.mount("#app");
  </script>
</body>
</html>

进入Layui Vue中文文档

以上是编程学习网小编为您介绍的“Layui - Vue 前端UI框架的调用”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。

沃梦达教程

本文标题为：Layui - Vue 前端UI框架的调用