Layui - Vue 前端UI框架的调用

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中文文档

推荐9款支持 Vue3 免费开源的前端 UI 组件库

基于Vite/TypeScript/Vue3/ElementPlus+TinkPHP6前后端一体框架——Niucloud Admin

免费开源企业级前端 UI 组件库——TinyVue

免费开源的 Vue 3 桌面端 UI 组件库——Layui Vue

Layui - Vue如何设置默认语言

标签： Layui Vue Vue3免费开源组件 Vue3组件库桌面端UI组件库