Vue项目重构

最新推荐文章于 2024-07-11 10:10:46 发布
最新推荐文章于 2024-07-11 10:10:46 发布
阅读量1.2k 收藏 1
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34893937/article/details/106671062
版权

Vue项目重构

Vue项目重构

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

为什么要进行代码重构

随着时间的推移、需求的剧增，必须不断的修改原有的功能、追加新的功能，还免不了有一些缺陷需要修改。为了实现变更，不可避免的要违反最初的设计构架。经过一段时间以后，架构就千疮百孔了。bug越来越多，越来越难维护，新的需求越来越难实现，最初的代码构架对新的需求渐渐的失去支持能力，而是成为一种制约。

进行代码重构的意义：
1、提升项目的可扩展性
2、规范代码，使代码更加清晰，更容易其他项目成员理解
3、有利于发现一些隐藏的bug
4、有利于提高后续的工作效率

代码重构的方法

尽可能的将项目代码组件化

用vuex进行统一的状态管理

重命名函数、组件

用一些必要的配置文件

合理使用异步组件

尽量不将代码写死、尽量避免重复代码

css尽可能的用继承、提取公共样式、避免过多选择器

减少dom操作，使用ref

吞肥皂吐泡泡
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅谈vue项目重构技术要点和总结
08-28
主要介绍了浅谈vue项目重构技术要点和总结,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2022 年最新前端 Vue 项目重构总结
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
01-27 1058
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群本文主要内容对于老旧的项目，升级webpack的时我的操作步骤。基于项目的产品定位和业务发展走势，在重构时我可以从哪...
【VUE实战项目】使用typescript重构项目
最新发布
Joker_ZJN的博客
07-11 1709
vue实战系列之typescript重构项目
记一次 Vue 项目重构
weixin_33694172的博客
03-02 955
随着公司项目越做越复杂，因前期团队对 Vue 使用经验不足，导致留下比较多坑。再这样下去项目会变成越来越难以维护，于是我对主管说：“主管，我想重构”，便有了这次的重构经历。经过对项目分析，主要存在以下问题： 全局样式满天飞 组件越来越多，管理不方便 核心页面 1300 多行代码，阅读性非常差 本项目是一个金融类项目，采用可视化的资产...
Vue：重构
小太阳DENGJIE的博客
01-10 186
npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass
vue的豆瓣电影重构为react
08-10
【标题】：“vue的豆瓣电影重构为react...通过以上知识点的掌握，开发者可以逐步完成从Vue到React的项目重构。这个过程不仅要求对React有深入理解，还需要熟悉Vue的架构，以便于准确地将功能和逻辑迁移到新的技术栈中。
Vue发布项目实例讲解
10-16
Vue项目完成后，通常需要发布到生产环境中供用户访问。发布Vue项目涉及到多个步骤，包括项目的打包、部署以及确保代码的可读性和维护性。下面详细介绍这些知识点： 1. Vue项目打包发布流程： Vue项目的打包通常是...
记一次用ts+vuecli4重构项目的实现
11-20
综上所述，这个项目重构的过程涵盖了现代前端开发中的常见技术栈，包括 Vue.js、TypeScript、Vue Router、Vuex、SCSS，以及项目构建、配置和测试等多方面知识。重构的目的在于提高代码质量和维护性，而使用 Vue CLI ...
2023 年最新前端 Vue 项目重构总结
油墨香^-^的博客
02-14 825
因为公司的产品是把同类型的业务软件在不同电商平台上架，所以新开的项目是把老代码移植过来,删改拼凑后上架。因此文件目录零散，引入导出混乱，代码冗余，风格不够统一规范。这些毛病导致代码可读性和维护性很低，且样式冲突很多，奇怪的难复现的bug也很多。我就计划在迭代填坑中，对项目进行一次改造优化。
重构Vue项目的通用处理流程
weixin_34393428的博客
02-11 972
导火索 需要给所有查询页面加上筛选条件缓存功能，查看了一下现有代码，发现每个页面都有大量冗余的关于本地存储和远端存储的代码，并且每个页面的存储逻辑都略有不同，想了半天，愣是一行代码没写下去。我离开座位，就一直想，到底是什么东西在妨碍我，最后所有矛头都指向一点——缺少通用流程。 思考原因 缺少沟通 项目在产品阶段时，定位的是一个实施查询平台，其中有多个查询页面，每个页面的查询功能点不同，我跟另一个小...
vue项目重构ssr，一看就懂
weixin_44314609的博客
10-12 879
创建vue项目 vue create ssr-demo 安装router、vuex vue add router vue add vuex 基础vue项目目录如下： 重构成ssr项目 1、修改路由配置 // router/index.jsimport Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) // 工厂函数 每次请求返回一个Rou
关于一个陈年Vue项目的重构优化
qq_42487870的博客
09-11 1259
都说好酒要珍藏，年份越老味道越好，那么项目的话，就要反过来了。要时常的更新迭代才能保证项目的时效性，不会太落伍于时代。就在前两个星期，我接到了公司的重构优化的需求，对象是一个很老的项目（对于前端来说）也就是两年前的项目了。 ps：本编只是讲大体是如何去做的（只是一个参考思路），没有具体实现的步骤～如果有需求，之后再补上咯～毕竟我也还是个弟弟，有什么可以改进的地方还希望大佬们多多指出～ 老项目的分...
Vue重构项目完结篇
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
05-19 479
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群来源：凉城ahttps://juejin.cn/post/6959808183988650014前言2021年3月底...
html项目重构为 vue,vue项目重构技术要点和总结
weixin_42470196的博客
06-20 1094
2018年2月8日前言最近太忙了，博客好久没有更新了。今天忙里偷闲，简单总结一下最近vue项目重构的一些技术要点。vue数据更新， 视图未更新这个问题我们经常会遇到，一般是vue数据赋值的时候，vue数据变化了，但是视图没有更新。这个不算是项目重构的技术要点，也和大家分享一下vue2.0通常的解决方案吧！解决方案如下：1、通过vue.set方式赋值Vue.set(数据源, key, newValu...
后台管理项目重构为vue3.0
m0_60970928的博客
02-16 1186
我们平常玩的游戏有时需要更新出新的内容，我们的项目也需要更新迭代，这就需要项目的重新构建，这样就能向用户展现更好的，更优秀的项目。以上就是后台管理项目重构为vue3.0的小案例以及我在更改的过程中遇见的bug以及更改方法。希望本篇文章能够帮助到你，不懂得可以评论区或者私信问我，我也会一 一解答。我的其他文章:https://blog.csdn.net/m0_60970928?type=blog。
2024年前端最新谈谈使用vue对老项目进行重构的一些思考和总结，今年面试
2401_84411323的博客
05-14 965
正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。好好的准备一下简历，毕竟是找工作的敲门砖。刚开始准备全面重构的时候，我是犹豫的，害怕未知的挑战。
什么是重构，以及vue3.0如何重构vue2.0项目
weixin_62226037的博客
02-16 625
重构它可以帮助你始终良好的控制你自己的代码，如果没有重构，你的代码会慢慢的逐渐的腐坏，毕竟代码这东西每天都在更新，时间越长越难以理解自己原来的设计。并且还有各种大量的接口回调会导致严重的内存泄漏，还包含大量的重复代码，所以为了代码共容易理解，方便后期维护，这就是我们重构代码的很大一部分原因。例如：element 但element他是vue2.0的时候使用的但我们在后边加一个plus知道什么意思了吧他就变成vue3.0的了。那么从字面意思来说呢重构就是把原本的东西把他推到了重新解构，
vue3重构vue2项目
09-02
重构Vue2项目到Vue3可以按照以下步骤进行： 1. 首先，创建一个新的Vue3项目。可以使用命令行或者Vue CLI来创建一个空的Vue3项目。 2. 接下来，将Vue2项目的目录与创建的Vue3项目的目录进行对比。可以查看两个项目的目录结构和文件，找出需要迁移的文件和目录。 3. 逐步将Vue2项目的文件迁移到Vue3项目中。根据对比结果，修改不合适的地方，使其适配Vue3。可能需要更改的地方包括路由配置、组件引用、语法等。 4. 如果原先的Vue2项目中使用了一些Vue周边的库，需要确保这些库在Vue3项目中也能正常使用。可以查看这些库的官方文档或社区讨论，了解它们是否已经适配了Vue3，并按照相应的指导进行配置和迁移。 总之，重构Vue2项目到Vue3需要创建一个新的Vue3项目，对比和迁移文件，并根据需要修改适配的部分。同时，还需确保原先使用的Vue周边库在Vue3项目中能够正常工作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [使用Vue3重构vue2项目](https://blog.csdn.net/qiwoo_weekly/article/details/109192667)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值