好消息:用 vue3+layui 共同铸造我们新的项目

前言:

        layui这个框架不知道多少人还在关注着,记得第一次接触它是在18年,后来随着vue,react的盛行,jquery+layui的模式受到了特别大的冲击,后来作者都放弃维护他的官方网站,转而在github/gitee上做后期维护了,但是现在好消息,他又升级了,现在可以在vue3上使用他了,而且功能更加强大,对比element/iview/antd  这些流行框架,他也有很多自己的特色。从2022.9开始发布稳定版本的它,在经历了风雨后,也将绽放他的魅力!

gitee官方地址 :

layui-vue: layui - vue 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.icon-default.png?t=N7T8https://gitee.com/layui/layui-vue?_from=gitee_search

layui-vue3的官方地址:

Layui - Vue 前端 UI 框架icon-default.png?t=N7T8http://www.layui-vue.com/zh-CN/components/qrcode

特色功能

1、内嵌了各种异常场景

Layui - Vue 前端 UI 框架

好消息:用 vue3+layui 共同铸造我们新的项目_第1张图片

2、条形码,不用你额外下载插件,它本身就支持了

好消息:用 vue3+layui 共同铸造我们新的项目_第2张图片

具体使用步骤:

1、安装
npm install @layui/layui-vue --save
2、全局注册
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')
3、按需加载

首先你需要安装 unplugin-vue-components 和 unplugin-auto-import 两款插件。

npm install -D unplugin-vue-components unplugin-auto-import

然后修改 vite.config.js 或 vue.config.js 的配置。

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { LayuiVueResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    AutoImport({
      resolvers: [LayuiVueResolver()],
    }),
    Components({
      resolvers: [LayuiVueResolver()],
    }),
  ],
}
4、页面上使用
普通消息

你可能感兴趣的:(vue3.0,layui,前端,javascript)