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中文文档
以上是编程学习网小编为您介绍的“Layui - Vue 前端UI框架的调用”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:Layui - Vue 前端UI框架的调用
基础教程推荐
猜你喜欢
- 使用Cookies保存网站历史浏览记录实例代码 2024-04-15
- v-for循环出现控制Duplicate keys detected: 'XXXXXX'报错是什么原因 2024-12-08
- 第11天:不用表格的菜单 2022-11-04
- clear 万能清除浮动(clearfix:after) 2024-03-13
- js控制的回到页面顶端goTop的代码实现 2024-01-07
- vuejs导出excel表格(可以设置样式) 2024-12-09
- 反向Ajax 30分钟快速掌握 2023-01-20
- JavaScript返回当前会话cookie全部键值对照的方法 2024-03-21
- vue中动态引进组件、动态引进js模块文件 2023-10-08
- 利用iscroll4实现轮播图效果实例代码 2024-04-02