layui-vue简单体验-layui-vue – 大飞的新部落

1、前言

之前，我曾经介绍过使用vue+LayUI+FastApi实现前后端分离的小demo，有同学单独跟我推荐说有专门适配vue的LayUI版本，它就是layui-vue，今天我们一起来体验一下。

2、快速开始

NodeJs的安装点这里：http://nodejs.cn/；安装完记得修改npm源。

2.1、创建vue项目

mkdir layvue && cd layvue
vue create demo

然后选择创建vue3项目回车，稍等片刻项目即可创建成功。项目创建过程↓↓↓

Vue CLI v5.0.4
✨  Creating project in E:demolayvuedemo.
🗃  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:demolayvue>

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文档镜像地址：

http://www.layui.org.cn/

http://layui.sandbean.com/index.htm

http://www.uimaker.com/layui/doc/