好歹我也使用了一年多的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://www.layui-vue.com/zh-CN/guide/introduce 网站地址
关注我 持续更新前端知识

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐