layui-vue简单体验-阿里云开发者社区

layui-vue简单体验

2022-06-20 3167

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： layui-vue简单体验

网络异常，图片无法展示

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

www.layui.org.cn/

layui.sandbean.com/index.htm

www.uimaker.com/layui/doc/