[JavaScript知识库]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')

2. 重点来了 按需安装 官网可没下面这代码哦 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()]
            })
        ]
    }
}

3. 这下可以直接使用了

 <!-- 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 网站地址
关注我 持续更新前端知识