骆驼Lara-CSDN博客

原创 Vue3.5 企业级管理系统实战（二十）：角色菜单

本篇聚焦于角色菜单权限分配功能的实现，围绕“给角色赋予菜单权限”这一核心场景，从接口设计、组件封装到页面集成展开完整技术方案的阐述。

2025-05-23 16:01:03 411

原创 Vue3.5 企业级管理系统实战（十九）：菜单管理

篇幅原因，本节先探讨菜单管理页面增删改查相关功能，角色菜单，菜单权限，动态菜单等内容放在后面。

2025-05-19 15:00:39 319

本文详细介绍了用户管理功能的实现，包括接口定义、Store管理以及用户界面的开发。首先，在src/api/user.ts中定义了用户相关的CRUD接口，如登录、获取用户列表、添加、删除和编辑用户等，使用Apifox进行模拟。接着，在src/stores/user.ts中实现了用户Store，管理用户状态和操作，如登录、登出、获取用户列表、添加、删除和编辑用户等。最后，在src/views/system/user/index.vue中实现了用户管理页面，包括用户列表展示、分页、查询、添加、编辑和删除用户等功能

2025-05-09 18:05:51 422

原创 Vue3.5 企业级管理系统实战（十七）：角色管理

本篇主要探讨角色管理功能，其中菜单权限这里先不实现，后续在菜单管理中再进行实现。接口部分依然是使用 Apifox mock 的。

2025-05-06 20:06:14 428

原创 Vue3.5 企业级管理系统实战（十六）：登录登出及鉴权

在实现登录之前，需要说明几点。首次登录系统，需要有一个 super_adimin 角色，角色名是限制死的，默认具备全部菜单路由权限。另外，还需要创建用户，用户信息包括用户名、密码、邮箱、手机号、是否启用，用户关联的角色等。角色和用户都可以通过写接口去添加，或者直接在数据库 Roles 和 Users 表中添加（这里只说明前端实现流程，接口数据库需自己准备模拟，本文我是通过ApiFox mock 的接口，username：1234，password：1234，演示图中会使用）。

2025-04-23 11:10:28 749

原创 Vue3.5 企业级管理系统实战（十五）：其他全局设置项

在设置面板中，除了主题颜色的选择设置，还可以添加其他全局配置选项，如 tagsView 导航栏，Logo 的显示隐藏配置等。

2025-04-16 16:52:20 451

原创 Vue3.5 企业级管理系统实战（十四）：动态主题切换

自定义组件要使用主题切换，需要在组件中进行添加，示例如下：示例1：<template>:class="{}":style="{theme : ''}"-- 省略其他代码 --></div>//从应用的路由配置文件中导入了所有的路由定义//...省略其他代码...//...省略其他代码...</script>//...省略其他代码...</style>示例2：<template><div><el-menurouter/>

2025-04-12 20:03:57 855

原创 Vue3.5 企业级管理系统实战（十三）：TagsView标签栏导航

本篇探讨标签栏导航 TagsView 组件的开发，TagsView 组件滚动及固定的处理、组件缓存、右键菜单功能、重定向实现等。

2025-04-03 16:54:08 542

原创 Vue3.5 企业级管理系统实战（十二）：组件尺寸及多语言实现

本篇是关于全局配置组件尺寸和多语言的内容

2025-04-01 17:28:44 341

原创 Vue3.5 企业级管理系统实战（十一）：全屏切换组件

本篇主要探讨如何在导航栏（Navbar）中添加全屏切换按钮，并借助功能强大的screenfull插件，丝滑实现全屏切换功能，为用户打造更为便捷、流畅的交互体验。

2025-03-28 17:03:38 466

原创 Vue3.5 企业级管理系统实战（十）：面包屑导航组件

本篇介绍面包屑导航组件的封装。

2025-03-27 17:29:37 524

原创 Vue3.5 企业级管理系统实战（九）：菜单组件

本篇主要讲解菜单组件的开发

2025-03-17 17:53:41 664

原创 Vue3.5 企业级管理系统实战（八）：Sidebar组件开发 2

本篇通过 Pinia 实现侧边栏（Sidebar）的展开收起功能，并通过 Pinia 实现展开状态的持久化。

2025-03-06 17:28:23 638

原创 Vue3.5 企业级管理系统实战（七）：Sidebar组件开发 1

本文讲 Sidebar 组件里 el-menu 配置。包括设置样式变量，解决类型导入问题等。

2025-02-19 18:01:22 339

原创 Vue3.5 企业级管理系统实战（六）：Vue3中defineProps用法

本文介绍 Vue3 中defineProps，它是组件通信的重要函数，基本用法有运行时与基于类型声明两种。其支持多种类型，验证方式多样。Vue3.5 引入新特性，如响应式 Props 解构、新默认值写法，简化开发。通过电商示例展示其应用，提升开发效率与代码质量。

2025-02-11 17:50:52 1672 1

原创 Vue3.5 企业级管理系统实战（五）：图标组件

图标组件是前端开发中常用的元素，常见开发方式有三种：字体图标、SVG图标和图片图标。：把图标当字体处理，每个图标对应字体字符。可通过设置字体属性控制显示，如 Font Awesome 库，引入 CSS 文件后即可使用。优点是易改大小、颜色且不失真，文件小加载快；缺点是只能单色，更新需重新生成字体文件。：基于 XML 语法，可无损缩放、支持丰富效果。可内联 SVG 代码到 HTML，也能在前端框架封装成组件。优点是支持多色、无损缩放、可做动画交互；缺点是代码量大、旧版浏览器可能有兼容问题。

2025-02-07 18:08:51 1280 1

原创 Vue3.5 企业级管理系统实战（四）：组件及API自动导入配置

本文介绍如何在Vue 3项目中通过unplugin-vue-components和unplugin-auto-import插件实现Element Plus按需导入，优化性能。涵盖配置步骤，注重服务型组件导入，提高开发效率，减小应用体积。

2025-02-04 18:01:06 1058

原创 Vue3.5 企业级管理系统实战（三）：页面布局及样式处理（Scss & UnoCSS ）

本章主要是关于整体页面布局及样式处理

2025-01-22 17:54:52 1707 4

原创 Vue3.5 企业级管理系统实战（二）：Router、Pinia 及 Element-Plus 集成

通过 pnpm 安装 Vue Router。

2025-01-12 17:12:04 939 3

原创 Vue3.5 企业级管理系统实战（一）：项目初始搭建与配置

本章旨在掌握使用 Vite 构建 Vue 3.5 项目框架的核心技能。通过整合 ESLint 9、Prettier 等现代化工具，打造流畅且质量上乘的开发流程。了解如何利用 Vue Router 实现路由控制，Pinia 进行状态维护，以及通过 Element Plus 提升用户界面的构建效率。此外，还将探讨如何运用 Sass 和 Unocss 精细化样式管理，以及如何集成 Iconify 图标库以实现灵活的图标导入。最终，学习高效组件管理的技巧，为项目开发提供有力支撑。

2025-01-08 21:41:09 1009 2

原创微前端框架调研

平时我们写项目的时候，都是用单页应用，用组件去拼接项目，随着我们的功能越来越复杂，我们会发现，项目中的组件越来越多，有时项目上线后，我们只想公开组件的某个部分，在更改组件后，会出现一个问题，我们需要把整个个项目重新打包，打包时间会比较长（可能修改了一个组件，打包却需要5-10分钟）。另外，组件的维护也非常不方便（可能有成千上百个组件）。除此之外，一个项目可能有多个团队去开发（比如按模块去划分，交给不同的团队去开发），这样可以面临人员众多，不好管理，团队技术栈不统一的问题。

2024-09-23 17:51:35 1051

原创在使用Elment-UI的Vue项目中使用iconfont上的第三方图标

在使用Element-UI的Vue项目中，Element-UI自带的图标数量比较少，往往不能满足项目需要，这时候需要引入第三方图标，比如常用的。

2023-11-27 18:16:07 621

原创 lottie动画使用

lottie动画使用

2023-01-28 13:55:45 908 2

原创 vue文件下载进度条

vue文件下载进度显示

2022-08-15 16:41:01 5485 6

原创 vue-cli项目中使用Electron

在vue-cli项目中使用electron的方法

2022-01-11 17:41:58 3415 2

原创 vue项目通过Electron生成桌面应用

vue项目通过Electron生成桌面应用一、安装1. 把electron的官方demo下载下来2. 安装cnpm3. npm start 启动electron4. 修改vue项目5. 打包vue项目，将打包出来的dist文件夹复制到electron项目的根目录下6. electron文件夹中，删除根目录下index.html文件7. electron文件夹中，修改main.js，修改打包文件路径为vue项目的index.html8. electron中，安装打包需要的依赖electron-packager

2021-12-23 15:14:51 1783

原创 Vue3.0快速入门

一、安装1. cdn<script src="https://unpkg.com/vue@next"></script>2. npm$npm install vue@next3. vue-cli 需要升级到Vue CLI v4.5 yarn global add @vue/cli@next # OR npm install -g @vue/cli@next 4. vite使用 vite 体验更快速#npm$ npm init vite-app &lt

2021-09-09 17:08:06 6420

翻译你应该知道的10个ES2020中的javaScript新功能

好消息-新的ES2020功能现已完成！这意味着我们现在对ES2020中发生的变化有了一个完整的了解，这是一个新的和改进的JavaScript规范。所以我们来看看这些变化有哪些。1：BigIntBigInt，JavaScript中最令人期待的功能之一，终于来了。它实际上允许开发人员在用于数据处理的JS代码中使用更大的整数表示形式来进行数据处理。目前，你可以在JavaScript中存储的最大整数为pow(2, 53) - 1。但是实际上BigInt允许你超越此范围。如上所示，你需要在每个数字的末尾加上

2020-05-22 11:19:31 463

空空如也

空空如也