简要从VUECLI2迁移到VUECLI3,项目选型

2,795 阅读6分钟

缘由

之前在YW公司,经历了一个老项目,vue项目长达2年。开发的过程中,启动就需要5分钟。编译也比较慢。作为一个对开发体验有追求的前端,实在是忍受不了。所以在一次机缘之下,对项目进行了一次升级。原本的VUECLI2变成了VUECLI4.编译启动从5分钟变成1分钟,常规代码编译也有所提升。

吐槽

之前不是离职了吗?我会把我能迁移项目这个能力拿出来讲。但是基本上这些公司都不关注,或者不在意这些。我想项目负责人更多的是要稳定。反正就是能用就行。我不知道我做到的是不是对的。但是你作为一个项目负责人,不应该要保证项目是可持续维护吗?

再一个就是很多公司会觉得你这不就是一个小东西吗?还拿出来秀。那请问你怎么不干呢?鄙视别人之前自己行不行没有点B数吗?

听到我只是把cli2变成cli4就觉得没什么东西可以说的。那你知道中间有多少坑吗?

迁移行为分析

1、项目有时候真的不是越新越好,当两个版本之间出现巨大的变化的时候,其实应该要考虑你的技术架构是不是老了

2、我们做项目迁移和升级的目的是什么——框架的活跃度和项目生命周期

3、论去中心化思想在项目中的重要性——良好的项目规范和去中心化思想能让项目生命周期更长。减少祖传代码

一、版本分析

首先你电脑上面必须要有vuecli2版本的初始版本和vuecli3,4的一个项目demo。你第一要做的就是区分出两者之间的区别。

个人总结版本分析:

1、静态资源文件统一归类,cli3开始放入plulic下面,但是2为static,两者行为一致

2、大家都是用src作为开发目录,那么其实就没什么,直接拷贝就行了

3、webpack配置的差异,非常巨大,cli2为build和config方式,完全是webpack目录格式。但是cli3之后将build目录单独成为一个npm包,所有配置都由vue.config.js接管

4、package.json差异非常大,cli3进行了简化,npm包进行了高度浓缩,cli2就非常丑,而且很累赘

5、index.html也有所差异,但是自己拷贝就行了

6、根目录其余eslint,babel等配置检查

二、项目分析

迁移目标1:项目迁移之后大bug没有,接口跑起来,文件无报错

上面做了版本分析,主要是需要认清你当前项目和老项目之后会有多大的差异。下面是项目分析

1、你需要反复对比config,和bulid两者文件夹,之前都做了哪些优化,配置,会影响项目的。一般主要是config会影响项目运行,build部分多是优化部分。关键是分析出所有和原始的cli2不一致的部分,所有的不一致你都需要在vue.config.js中实现

2、eslint,babel等配置进行分析,一般进行拷贝移植就行了

3、对你的package.json部分进行分析,找出所有cli2中不一致的部分,这些都是后期打入的包,注意版本

三、迁移开始

1、准备一个最新的cli4的vue项目初始,项目创建一般会有eslint,babel,非ts等。主要是需要根据你上述的几步分析,得出你需要的基础的项目应该怎么创建

2、src文件直接拷贝

3、index.html部分和static部分放入plulic里面。这里最怕的是有人用相对路径引入静态文件。没有那就最好

4、npm包注意版本的情况下,打入新的vue项目中,版本很重要。注意指定版本install

5、抛开webpack所有优化部分,对把之前bilud和config中的配置,配置到vue.config.js中

到了这一步,其实你可以启动下项目,如果没什么大问题那么基本上是迁移完成了。后面就是查漏补缺

四、为什么没有提到去中心化思维

其实不是我没有提到,而是其实这处于项目的方方面面

举例:

1、vuecli2到cli3进行了项目升级,配置文件独立成npm包,config文件抽离

2、src目录和public目录的更加规范

3、项目中axios二次封装

4、各种功能函数的封装

……………………

最关键是你的项目如果结构清晰,分离有序,那么你的项目就可迭代,可维护,生命周期会更长,至少多延续2年。

项目如何选型

说点题外话,其实上面就是大致的我在之前公司对vue项目的进行的升级。并且成功运行上线,优化效果不错。而且当时我在无网络环境下进行升级成功的。这也是我离职的核心问题。我发现我无法忍受这种环境。是我太追求新东西了。

后面找工作一个月都没有好的公司。唉!现在公司,我也是无奈之举。但是办公环境还是比较喜欢的

回归正题:

1、你作为项目负责人该如何去选型你的技术框架

个人要点:热门,社区活跃,文档完善,入门难度低,保证未来3年项目可维护,可升级。

2、为什么vue更火了呢?

因为vue入门难度低,react非常好,但是他难,所以vue后来居上

3、ts为什么传的很火,也需要学习,但是项目中为什么应用很少

因为招不到人,因为实际情况下会导致项目成为祖传代码

4、你作为项目负责人,是不是还在追求你的代码无注释,变量名称就是注释的行为

我只能说,愚蠢。你要是担心后面的人会抢你的饭碗,会替代你,你怎么不想想你为什么可以被替代。

5、比如现在小程序框架很多,但是热门就是uniapp和taro。还有mpvue,mpx,wepy等等

选taro,选uniapp是因为火热,并且用的人确实非常多,wepy是官方维护,至少说小程序不似,wepy不死。那么选mpvue,mpx的呢?

不是我不选择小众框架,但是如果你无法保证该框架可维护,可迭代,或者生命周期。那么请不要选择,不然就是坑。

6、都说大公司都是从小公司来的。但是一个大公司,一个小公司,你选哪个?


后面还会有一篇博客,是我最近做的,把wepy项目迁移到uniapp。有人说我傻?那么其实迁移的目的是什么?下一次我会发表我的看法