改装vue-element-admin

最新推荐文章于 2023-12-12 17:20:39 发布
最新推荐文章于 2023-12-12 17:20:39 发布
阅读量2.8k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： erp nodejs 前端 文章标签： 自己的记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/towrabbit/article/details/84668486
本文分享了一位前端工程师如何基于Vue-Element-Admin框架重做公司ERP系统的过程。从项目选择、遇到的问题到实现的进展，包括用户权限管理、token验证等关键功能的实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题与需求

公司需要重做一个erp系统，所以个人想根据已有的框架改一个，自己是前端，对于vue熟悉一些于是找了一个vue后台管理系统框架。

最后选择了vue-element-admin

选择原因

vue-element-admin在github上有23kstar 超出了其他同类型的资源，而且功能已经较为齐全了，所以只要选择部分功能改装一下，加上接口，应该就可以使用了。

遇到的问题

这个是一个个人项目，虽然整个项目基于vue,element-ui,功能比较完善，但是毕竟是别人的东西。自己不是对其结构以及不同文件的功能还不是很熟悉。所以首先要从熟悉开始。、
此外作者的文档也不是很友好，有些看不太懂的地方

目前进度

实现了用户名密码登录 有两种权限，通过token来生成路由，每次请求将对token进行验证 验证通过才能得到信息。

需要做的事情

  • element-ui 一个不错的vue ui组件库，其中已经有许多常用的功能了，之前没有用过 徐亚好好学习
  • vuex状态管理系统，就目前的理解 算是所有组件的公用信息存储中心，如果有什么公用的信息就在这里拿 信息的更新与获取也比较方便
  • 要习惯接口统一调用
  • mysql数据库语言还不太熟练
vue-element-admin：基于Vue.js的企业级后台管理系统解决方案
wylee的博客
05-26 1586
vue-element-admin是一个基于Vue.js和Element UI的企业级后台管理系统模板，提供开箱即用的解决方案。核心优势包括功能完备的权限管理、动态路由加载、数据可视化（集成ECharts）、国际化支持和主题定制能力。采用Vue 3、TypeScript、Vite等现代技术栈，支持RBAC权限控制，通过路由守卫实现动态路由加载，并内置i18n多语言切换。项目结构模块化，适用于ERP、CMS等企业应用开发。
java-初识大前端Node.js、ES6、Npm、Babel、模块化规范、WebPack、Vue-element-admin本地安装问题及解决、Git安装及配置、uni-app
此后如竟没有炬火我便是唯一的光
07-08 536
Node.js 是脱离浏览器环境的javascript 程序，基于V8引擎 运行命令 ： 或 控制台执行： 启动服务器程序；浏览器中输入： 如果以 格式解析 停止服务：控制台输入 注意：如果报错，就说明权限不够，记得用管理员的方式打开 node 执行 ES6 可以看到,index实在for循环内定义的，但是能够在for循环之外来使用的,这个并不是我们能够看到的,这种现象，我们称作为变量穿透，同时在定义变量PI的时候，是希望其不能被修改的，但是显而易见，它是可以被改变的。 注意：
laravel-vue-admin：Laravel和vue-element-admin前一级分离的后台管理系统
02-10
Laravel-Vue-Admin Laravel-Vue-Admin主要优势在于前分离，具有一键生成功能，页面公共组件强大。串行接口逻辑部分，也就是Service通过Laravel容器进行管理，发挥出Laravel的优势。重复的工作，为喜欢VuePHP工程师提供便利。laravel-vue-admin参考了许多类似的项目，使用起来都很方便。例如，Larave-Admin，FastAdmin，可以快速开发后台。而Laravel-vue -admin也主要是因我个人开发习惯才产生的想法。 Laravel-vue-Admin中项目文档 编码云仓库地址 安装 composer require frey/laravel-vue-admin 配置 添加提供者到config / app.php。 'providers' => [ //... Tymon \ JWTAuth \ Pr
vue-element-admin框架改造
m0_54042402的博客
06-16 1226
vue-element-admin 1.装包并运行项目 拉下vue-element-admin项目后，先用npm i进行装包，装包后，查看package.json文件,dev是运行，build:prod是打包 2.登录页面改造 登录界面 在src->views->login->index.vue下修改内容,详细信息如下: main.js 在src->main.js下 删除.github,mock,plop-templates文件,mock是前端用来模拟数据的，plop-te
vue-element-admin动态菜单改造,含数据库以及前端目录结构参考
最新发布
m0_53899978的博客
12-12 2594
向handleLogin中添加dispatch( "permission/generateRoutes",userRoles)
element-admin框架改造
qq_36099763的博客
11-25 446
element-admin框架改造目录网络请求封装以及后端api接口对接动态路由设置创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 目录 网络请求封装以及后端api接口对接 1：删除项目中的mock,因为我们不需要模拟数据，直接上菜才是王道 mock文件夹 ，删除 main.js中对应的mock引用 ，删除； vue.config.js中对应的
改造vue-element-admin遇到的一个坑
NignSah的博客
07-02 341
菜单管理那一块我使用从后台获取的数据，但是一直报错 Error in render: "TypeError: children is null" 后来查阅资料，当一个菜单无子菜单时，需要把该菜单的children设置为undefined而非null，谨记
vue-element-admin登录流程
热门推荐
兔子零
09-24 4万+
1.安装最新的vue-element-admin; 2.如有需要可以去掉eslint;在下面这个文件里面全局搜索 3.删除所有的eslint文件 4.开始安装依赖包， npm install 5.启动服务:npm run dev ,但是打开的是两个窗口，需要把open设置为false; 6.进入登录页面： 7.后端编写登录接口（这里以java为列）: 验证码根据需求来进行设置; 8....
vue-element-admin新版v4.0的登录改造步骤及零星问题解决
Parker_cpp的博客
01-16 3838
vue-admin-template官方网站为，新版本为v4.0，其 store->modules->user.js 的登录与验证方法都与老版本不同，故登录改造时遇到了一些麻烦，以下为我对 vue-admin-template 进行登录改造的过程和其中一些问题的解决办法，亲测有效。
5. vue-element-admin 二次开发攻略指南
极客星云-优快云博客
08-12 5581
vue-element-admin 是一款非常强大和优秀的后端管理 UI 框架。 当我们基于此框架做一些二次开发的时候，往往需要对代码进行修改。 为了加快改造流程，我们来做一些优化方便二次开发。
laravel5.8+vue-element-admin 前后端分离项目----后端
weixin_42489159的博客
05-30 2607
laravel5.8+vue-element-admin 前后端分离项目 后端： laravel5.8 好像是参考这个文章（具体我忘记了，希望原作者指出）：https://blog.youkuaiyun.com/DongShiXiaRen/article/details/101125798 有请求日志，操作日志， jwt-auth 校验等等，我再其基础上加上 权限管理 laravel-permission 验证码 captcha，定时任务的使用，数据库是用MySQL，MongoDB等等 缺点：没有实现无痛刷新token
前端入门（二）npm包管理+模块化+bable转码器+webpack打包+vue-element-admin
qq_40707462的博客
04-07 557
一、npm包管理工具 NPM全称Node Package Manager，是Node.js包管理工具，相当于前端的Maven 。不需要单独安装，和nodejs一起 在命令提示符输入 npm -v 可查看当前npm版本 1、项目初始化 创建npm文件夹，右键文件夹–>在终端中打开，输入npm init 按照提示输入相关信息，如果是用默认值则直接回车即可。 #name: 项目名称 #version: 项目版本号 #description: 项目描述 #keywords: {Array}关键词，便于用户搜
vue-admin-template：基于element-vue-admin的框架进行改造的一个viue前端开发框架
02-14
构建设置 # 进入项目目录 cd vue-admin-template # 安装依赖 npm install # 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org # 启动服务 npm run dev 浏览器访问 发布 # 构建测试环境 npm run build:stage # 构建生产环境 npm run build:prod 其他 # 预览发布环境效果 npm run preview # 预览发布环境效果 + 静态资源分析 npm run preview -- --report # 代码格式检查 npm run lint # 代码格式检查并自动修复 npm run lint -- --fix
vue-element-admin
10-11
使用vue.js写的后台，使用了element组件，属于单页应用~进去直接查看README，有详细介绍及使用方法
Vue 新手学习笔记：vue-element-admin 之零散配置修改
乐之终曲
11-29 3359
Vue 新手学习笔记：vue-element-admin 之零散配置修改前言网页 Title 替换以及类似问题修改问题点修改 前言 本文更像随便，遇到框架中一些零散的配置修改在此记录，发现一个加一个 网页 Title 替换以及类似问题修改 问题点 修改 可以直接搜索功能搜索修改 对应文件： /src/layout/components/Sidebar/Logo.vue /src/settin...
大前端进阶-08-vue-element-admin
LC的博客
01-17 987
vue-element-admin 官网：https://panjiachen.github.io/vue-element-admin-site/zh/ 页面体验：https://panjiachen.github.io/vue-element-admin/#/login?redirect=%2Fdashboard 页面体验：https://panjiachen.github.io/vue-element-admin/#/login?redirect=%2Fdashboard 页面体验：https://pa
vue-element-admin项目学习笔记（1）安装、配置、启动项目
学习，是熵减的最有效途径。
06-12 752
【代码】vue-element-admin项目学习笔记（1）安装、配置、启动项目。
后台管理系统二次开发模板--vue-element-admin&&vue-admin-template
ly1477868382的博客
12-05 1502
官网地址：https://panjiachen.gitee.io/vue-element-admin-site/zh/在线浏览：https://panjiachen.github.io/vue-element-admin/#/dashboardgit地址:https://gitee.com/mirrors/vue-element-admin.git。
vue-element-admin 转换成中文(亲测可用 !!!!!)
qq_40137978的博客
11-24 7483
从admin官网上git下来的默认是英文，是修改不了语言的。如果需要转换成中文，在vscode终端里切换到 i18n分支 (切换分支方法自行百度)，然后npm install，npm run dev之后就是中文的了，如图： 先切换分支: 再 npm install 、npm run dev 按照这个方法，就能切换成功了，亲测可用。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值