web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. AIGC工具
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站
    手机应用

Layui - Vue 前端UI框架的调用

816 ℃

Layui Vue是一套Vue 3.0桌面组件库,遵循Layuivue经典的设计规范,开箱即用。2022年Layui Vue发布了1.0版本,2023年发布了基于Vue 3的2.0版本。它是一个UI组件库,使用简单,稳定可靠,设计经典。

使用npm工具安装layui vue

npm install @layui/layui-vue --save

全局注册到 Vue

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')

按需引入

import App from './App.vue'
import { createApp } from 'vue'
import { LayButton, LayTable } from '@layui/layui-vue'
import '@layui/layui-vue/es/button/index.css';
import '@layui/layui-vue/es/table/index.css';

var app = createApp(App).

app.component("LayButton", LayButton);
app.component("LayTable", LayTable);

app.mount('#app')

Layui – Vue直接引入

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="//unpkg.com/@layui/layui-vue/lib/index.css" />
  <script src="//unpkg.com/vue@3"></script>
  <script src="//unpkg.com/@layui/layui-vue"></script>
</head>
<body>
  <div id="app">
    <lay-button type="primary">{{ message }}</lay-button>
  </div>
  <script>
    const App = {
      data() {
        return {
          message: "Hello World"
        };
      },
    };
    const app = Vue.createApp(App);
    app.use(LayuiVue);
    app.mount("#app");
  </script>
</body>
</html>

进入Layui Vue中文文档

推荐9款支持 Vue3 免费开源的前端 UI 组件库

基于Vite/TypeScript/Vue3/ElementPlus+TinkPHP6前后端一体框架——Niucloud Admin

免费开源企业级前端 UI 组件库——TinyVue

免费开源的 Vue 3 桌面端 UI 组件库——Layui Vue

Layui - Vue如何设置默认语言

标签: Layui Vue, Vue3免费开源组件, Vue3组件库, 桌面端UI组件库

上面是“Layui - Vue 前端UI框架的调用”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。

当前网址:https://ipkd.cn/webs_12999.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

当前位置: 网站首页 > vuejs
本文共计1117个字,预计阅读时长8分钟
生活小工具,收录了80多款小工具
上一篇: 一键生成脚本与分镜,激发无限创意的一款AI故事生成助手——OneStory
下一篇: 一款专注于语音合成和音色克隆服务的AI语音工具——MiniMax Audio
x 打工人ai神器