vue3中使用 layui-vue, 没错layui版本的vue3---- ui框架
layui的vue3版本
·
好歹我也使用了一年多的layui ,去年layui关闭官网维护的时候我还难受了一段时间呢, 因为layui 我对jquery 属实好好练习了一把,
随着layui 关闭之后,我也渐渐对jquery 也淡远了.
直到最近 我看到了 layui-vue 这款 vue3的UI框架, 心理还是有点小激动呢.
官网推荐的是vite版本的使用方式,
我这里 简单介绍下 webpack版本的安装方式,毕竟现在还是webpack称王的时代.
- 安装
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')
- 重点来了 按需安装 官网可没下面这代码哦 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()]
})
]
}
}
- 这下可以直接使用了
<!-- 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 网站地址
关注我 持续更新前端知识
更多推荐
已为社区贡献35条内容
所有评论(0)