网站地图后缀,微信怎么建立公众号小程序,王占山七一勋章颁奖词,水果建设网站前的市场分析目录
背景描述
开发准备
第一步#xff1a;升级环境
第二步#xff1a;划分功能迁移顺序
第三步#xff1a;详细了解需要迁移的业务页面
第四步#xff1a;项目的一些配置的准备
详细开发流程
总结/分析#xff1a; 背景描述
之前的版本#xff1a;vue 2.6.8 i…目录
背景描述
开发准备
第一步升级环境
第二步划分功能迁移顺序
第三步详细了解需要迁移的业务页面
第四步项目的一些配置的准备
详细开发流程
总结/分析 背景描述
之前的版本vue 2.6.8 iview 3.3 element-ui 2.6.1 echarts 4.2升级后vue 3 element-plus echarts5
有一个项目的后台管理系统之前一直用的vue2.6.8大概是5年前开始开发的项目最近要新写一个项目但是用到之前的后台管理系统所以这次leader打算让我将Vue2升级到vue3因为vue3我最熟练的还是element-ui的组件所以UI框架打算还是用这个之前Vue2用的iview的UI虽然好看了一点点但是这个组件库很多组件有一些弊端两个组件库混用还有很多不可解决的bug所以这次干脆弃用。
升级Vue3是一个方面另一个是要将项目里的功能全部挪过来虽然admin后台的功能也不多也就以下几个模块: 1. 人员管理 2.角色权限管理 3.统计汇总 4.操作记录 5.个人设置 6.新增的两个业务页 这几个模块都是admin后台常见的功能难点是这个后台系统的主要脉络我并不清晰也就大概了解一些权限方面的控制详细的功能如果完全升级到vue3的写法也就要重新写有一些功能升级起来肯定要重新测试并且之前的摒弃的逻辑也要全部了解所以时间上肯定很紧急但是我现在也不要求尽善尽美现将后台的主要功能搭起来然后一些比如人员管理里面的很多功能我可以先不做主要是权限这块还要沿用之前的写法因为后端不升级所以接口都复用。 开发准备 先起一个空项目引用一些必要的框架等然后就开始迁移旧admin平台的功能。 起项目的过程很多地方都有教程我这边就不多讲了我先梳理我主要的迁移过程。
第一步升级环境
升级之前看到自己的node 还是14版本这里先升级node两种方法卸载再安装新版本或者借助NVM来切换node版本它帮助我们下载安装。我之前写过一篇教程可以看NVM使用教程
这次将node升级为20.2.0的版本所以下载nvm后就很好控制啦 但是升级完node还需要对应地升级npm这里有一个对照表 我现在的npm 还是6.14.17 所以下一步就是升级npm 不过nvm直接给我更新啦,很轻松第一步很顺畅坏消息是旧项目切换了20的版本后就起不来了不兼容所以我需要来回切换。 第二步划分功能迁移顺序
因为是迁移旧项目并且升级版本所以前端重新写但是可以用旧项目的服务也就是我还可以用旧项目的接口来改造那么久不用考虑接口只考虑功能上的迁移顺序了。在这一步需要先知道系统内除了业务以外的主要功能之前梳理的是业务功能比如各种管理页面这里是详细的系统迁移的过程 1.登录、退出功能 2.Axios的封装和API 3.路由跳转和路由表的配置 4.用户信息存储涉及store 5.权限管理暂时可以先不管 6.系统的layout开发 7.sidemenu的开发 8.header的开发 9.main区域的开发 10.组件库的引入 11.系统主题样式的引入和迁移 12.开始开发页面 13.图标组件库的引入SVG的封装 以上等等 第三步详细了解需要迁移的业务页面
这里是详细的页面首页、统计汇总、人员管理、项目列表、角色设置、操作记录、个人设置以及需要新加的两个业务页其中人员管理和项目列表是共用一个页面所以会封装的比较麻烦后面再开发而角色管理是控制权限的所以也后面开发这部分我先按照超级管理员来写比较简单写的肯定是个人设置首页所以开发的话也先开发这部分之后涉及权限和角色的再详细阐述。 第四步项目的一些配置的准备
这里是项目的业务开发前的一些准备工作先把项目配置好因为用了一个比较简单的模板所以就先在模板的基础上进行操作并且在项目的开始之前先将项目的settings设置好这样才不会格式化冲突我这里直接粘贴复制的其他项目的。
这里我个人浅浅的见解是毕竟很多人协同开发项目编辑器格式化不一样很容易出现代码覆盖的问题不方便后期维护和代码历史回溯。
所以我先在项目引入了ESLint 和 Prettier当然使用哪个看团队要求我这里是都使用了。
如果接手老项目要迁移新项目肯定要将之前项目的规范化要求拿过来通常是 .eslintrc.js、.eslintrc.json、.prettierrc.js、.prettierrc.json 等文件。我主要改了下面几个 并且需要配置vscode下的Settings.json文件。
第五步main.ts改成main.js可忽略
并且在一切开始之前由于工期较短我自己也比较擅长JS所以要先将TS改成JS的那么这一步就需要花费一些时间。这部分工作比较繁琐根据项目的配置来每一步都需要查找各个配置和插件之间的关系很多插件不太了解所以磕磕绊绊的但是主要改的是这些 箭头指向的都是新加或者修改文件名的ts文件既然我要用JS来写而且Ts的一些配置我也不熟悉那么我干脆就不用TS但项目还是要TS兼容JS所以把main,permission,settings这几个文件改成JS写法然后配置vite.config.js也就是JS的一些打包配置jsconfig.json 这是开发配置其余的配置都不改这样也顺利启动起来了。 详细迁移流程
系统的基础开发配置大部分弄好了然后第一步需要做的工作由于引用了模板所以很多前期工作已经被代替了这里理了一下详细的内容和流程
1.系统的第一个功能是登录那么需要加一个页面登录页和登录后的跳转页登录账号先使用admin账号将默认跳转到页面先加上所以现在是加了两个vue页面。
2.需要登录那么肯定要有路由表所以这一步先将原先项目的路由表升级版本和配置然后将路由表配置好。
3.登录功能的实现肯定需要axios的帮助那么此刻先去将Axios的拦截设置好然后封装好将之前的API接口封装成简洁一些的之前的太杂乱了API都不放在一块肯定不好管理。
4.画登录页面肯定需要组件之类的之前的样式可以照抄基本都是几个背景图片和几个输入框但是组件既然要变成element-plus的所以要先引入组件库。
5.写登录功能登录后肯定要存用户信息而且登录系统后刷新页面会获取用户的信息和权限所以这一步要使用store那么此刻也要引入store到这一步基本需要导入的库都差不多引用完了。
6.根据划分的功能来一步步实现需求。 总结 接下来改是从登录页开始开发了当然有很多琐碎的工作不过我会划分好模块进行的可以从专栏里查看。
