免费开源的 Vue 3 桌面端 UI 组件库——Layui Vue
2024年12月04日 建站教程
Layui Vue是一套Vue 3.0桌面组件库，遵循Layuivue经典的设计规范，开箱即用。2022年Layui Vue发布了1.0版本，2023年发布了基于Vue 3的2.0版本。它是一个UI组件库，使用简单，稳定可靠，设计经典。
免费开源描述
Layui Vue是一个免费开源的Vue 3组件库。有了MIT开源协议，我们可以免费下载使用，也可以用于商业用途。总的来说，这是很多热爱layui的开发者为了传承而打造的新一代UI组件库。它经常维护和更新，2.0版本足够稳定，可以理解和使用。
Layui Vue 的技术特性
1、经典设计：基于 Layui 的 CSS，保留了好看优雅的组件样式
2、轻量简洁，占用空间小
3、提供主题配置变量，支持 layui 没有的暗黑模式
4、提供 VS code 插件，优雅的地开发
5、支持 Vue3 setup 语法开发模式
6、支持 i18n 国际化
7、官方生态包含同样开箱即用的 admin 管理后台 Pear Admin Next
安装使用
使用 npm 工具安装 layui vue，若安装缓慢，可尝试用 pnpm 或其他镜像源。
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')
按需引入
Layui Vue 支持自动按需引入和手动按需引入，这样可以大大减少打包体积。只引用少量组件时，可以手动按需引入，配置如下：
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 最经典的还是直接在 html 中直接引入 js 、css 文件，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="/static//unpkg.com/vue@3"></script>
<script src="/static//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>
Pear Admin Next
Layui Vue是一个桌面ui组件库，非常适合开发admin管理后台。官方已经帮我们做出了最佳做法，即Pear Admin Next，这是我之前在网站上推荐的Pear Admin的升级版。它具有许多页面模板，易于使用:
1、基于Layui Vue的通用前端模板。集成最新技术，高效快速开发，前端分离模式，开箱即用；
2、核心模块包括:登录、工作区、表单页面、列表页面、结果页面、异常页面等功能；
3、代码少，学习简单，功能强大，轻量级，易于扩展，开发简单高效。
本文链接：http://so.lmcjl.com/news/18967/