layui-vue简单体验

Python研究所

发布于 2022-06-17 08:53:32

1.7K0

发布于 2022-06-17 08:53:32

文章被收录于专栏：大飞的部落阁大飞的部落阁

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:\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>