网络异常，图片无法展示
|
1、前言
之前，我曾经介绍过使用vue+LayUI+FastApi实现前后端分离的小demo，有同学单独跟我推荐说有专门适配vue的LayUI版本，它就是layui-vue，今天我们一起来体验一下。
2、快速开始
NodeJs的安装点这里：nodejs.cn/；安装完记得修改npm…
2.1、创建vue项目
mkdir layvue && cd layvue vue 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 demo npm 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-vue import Layui from '@layui/layui-vue' import '@layui/layui-vue/lib/index.css' // use Layui createApp(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' // 导入demo import 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、启动项目预览
npm run serve 复制代码
网络异常，图片无法展示
|
如上，layui-vue的元素已经成功渲染！
对比ElementPlus，layui-vue还是很好上手的，但是我们都知道layui是一个后端友好的UI库，目前的layui-vue已经失去了这个特点，但是其拥有的了和其他UI库一样的独立特性，更加适合用在前端后端彻底分离的场景下，针对后端开发者还是建议使用layui，更加方便快捷。
layui文档镜像地址：
