vue3中使用 layui-vue, 没错layui版本的vue3---- ui框架

好歹我也使用了一年多的layui ,去年layui关闭官网维护的时候我还难受了一段时间呢, 因为layui 我对jquery 属实好好练习了一把,

随着layui 关闭之后,我也渐渐对jquery 也淡远了.
直到最近 我看到了 layui-vue 这款 vue3的UI框架, 心理还是有点小激动呢.
官网推荐的是vite版本的使用方式,
我这里 简单介绍下 webpack版本的安装方式,毕竟现在还是webpack称王的时代.

1. 安装 npm install @layui/layui-vue --save

import Layui from'@layui/layui-vue'import'@layui/layui-vue/lib/index.css'createApp(App).use(Layui).mount('#app')

1. 重点来了 按需安装 官网可没下面这代码哦 webpack版本 不过下面的话这个 需要安装 npm install -D unplugin-vue-components unplugin-auto-import

const{ LayuiVueResolver }=require('unplugin-vue-components/resolvers')
module.exports ={configureWebpack:{plugins:[require('unplugin-vue-components/webpack')(),require('unplugin-auto-import/webpack')({resolvers:[LayuiVueResolver()]})]}}

1. 这下可以直接使用了

<!-- layui测试 --><lay-button type="primary">原始按钮</lay-button><lay-button>默认按钮</lay-button><lay-button type="normal">百搭按钮</lay-button><lay-button type="warm">暖色按钮</lay-button><lay-button type="danger">警告按钮</lay-button>

熟悉的感觉。是不是 又来了 如果我是技术主管的话 我还是会使用这款ui框架作为后台管理系统的ui框架呢
http://layui-vue.pearadmin.com/zh-CN/index 网站地址
关注我 持续更新前端知识