1、前言
之前，我曾经介绍过使用vue+LayUI+FastApi实现前后端分离的小 demo，有同学单独跟我推荐说有专门适配 vue 的 LayUI 版本，它就是layui-vue，今天我们一起来体验一下。
2、快速开始
NodeJs 的安装点这里：http://nodejs.cn/；安装完记得修改 npm 源。
2.1、创建 vue 项目
mkdir layvue && cd layvuevue create demo
复制代码
然后选择创建 vue3 项目回车，稍等片刻项目即可创建成功。项目创建过程↓↓↓
Vue CLI v5.0.4✨ Creating project in E:\demo\layvue\demo.🗃 Initializing git repository...⚙️ Installing CLI plugins. This might take a while...
added 828 packages in 38s🚀 Invoking generators...📦 Installing additional dependencies...
added 17 packages in 9s⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project demo.👉 Get started with the following commands:
$ cd demo $ npm run serve
PS E:\demo\layvue>
复制代码
2.2、下载 layui-vue
cd demonpm install @layui/layui-vue --save
复制代码
2.3、引入 layui-vue
在 src/main.js 中进行引入。
import { createApp } from 'vue'import App from './App.vue'import router from './router'// 引入layui-vueimport Layui from '@layui/layui-vue'import '@layui/layui-vue/lib/index.css'// use LayuicreateApp(App).use(Layui).use(router).mount('#app')
复制代码
2.4、创建新的页面
在 src/views 中创建一个 demo.vue
<template> <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></template>
<script></script>
<style></style>
复制代码
2.5、配置路由
在 src/router/index.js 中配置路由指向 demo.vue
import { createRouter, createWebHistory } from 'vue-router'import HomeView from '../views/HomeView.vue'// 导入demoimport demo from '../views/demo.vue'const routes = [ { path: '/', name: 'home', component: HomeView }, { path: '/about', name: 'about', // 懒加载 component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue') }, // 增加demo路由 { path: '/demo', name: 'demo', component: demo }]
const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes})
export default router
复制代码
2.6、配置首页
在 src/App.vue 中配置一个链接指向/demo
<template> <nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> | <router-link to="/demo">Demo</router-link> </nav> <router-view/></template>
复制代码
2.7、启动项目预览
如上，layui-vue 的元素已经成功渲染！
对比 ElementPlus，layui-vue 还是很好上手的，但是我们都知道 layui 是一个后端友好的 UI 库，目前的 layui-vue 已经失去了这个特点，但是其拥有的了和其他 UI 库一样的独立特性，更加适合用在前端后端彻底分离的场景下，针对后端开发者还是建议使用 layui，更加方便快捷。
layui 文档镜像地址：
http://www.layui.org.cn/
http://layui.sandbean.com/index.htm
http://www.uimaker.com/layui/doc/
评论