作为一名写了十多年代码， 在前端、后端之间不断反复横跳的码畜，虽然对于前端的MFC， QT, 各种游戏引擎（HGE, GB, Cocos2D等）的GUI等都有所涉猎，但是对于Web前端却一直没有触及，尽管对于H5很看好（想学），却也一直没有行动。直到最近，终于利用工作机会花了差不多一个月学习、实战了一把。这里说明一下，我之前对Web前端开发可以说是0基础。Html标签，css样式可能都只认识一两个，对VUE也只是知道有这么个框架而已。

大致情况是这样的，公司的游戏项目还处于前端Demo验证阶段，我后端做好了框架和基础测试之后，也做好了后台管理相关的一些接口，包括服务器状态相关的。接口和数据都准备好了，就差前端展示了，由于我本身的工作不多，所以顺其自然的想到了自学前端开发，自己撸Web界面。 一开始直接上手vue3， 鼓捣了两三天就放弃了.....0基础确实不适合直接上手VUE，步子迈大了....

直到最近，综合考虑自己技术栈（于私）和框架闭环成型（于公）的目的，决定从头开始学习Web前端开发。完整的学习流程如下：html、html5、css、js、vue3、element plus、echarts。

下面把这一个月的具体流程和心得记录一下：

1、第一周

最开始的一周，就是在菜鸟教程网站上走马观花的过了一遍html、css、js、vue。

基本上是一天一个，这个速度的话，基本不可能所有例子都练习一遍。好在有之前前端开发的一些经验，所以有些东西还是比较容易理解。更重要的是，我觉得，有的东西一开始不一定要马上牢记住所有细节，而是要知道有这么一个东西，实战的时候不知道细节再去查。要知道它支持什么， html有按钮、列表、输入框等，css可以t调字体、颜色、对齐、边框等样式，至于js，有其他编程语言的经验的话，过一遍很快。

关键是vue，这个在第一周花了2天时间之后，还只是入了一点皮毛，所以后面实战的时候还是要不断的补充学习。

2、第二周

学完基础之后，就开始实战了。好在vue cli脚手架的强大。一开始我都没想到强大到了如此地步。尽管官方是不建议新手直接使用脚手架的，因为不利于理解web开发的原理。但是我试探性的在控制台输入 vue ui后，面对打开的web界面，如发现了新大陆一般，一发不可收拾，吭哧吭哧就开始了实战之旅。。。

这里安利一波。Vue的开发工具确实做的很好，有了它，我可以很快速的开始构建项目，构建时可以选vue版本，ts/js等。也可以很方便的开发，支持实时更新，修改代码或者样式后，Save时，cli就在实时编译，立马能在浏览器看到结果。还有插件的增删。打包发布工具等。

一开始我是鼓捣了两三个后台管理开源项目的，但是最后都放弃了。为什么呢？我仔细想了一下，不是他们不好用，功能不够齐全，反而可能过于齐全（庞杂）了，当然最大的原因还是我是新手，0经验的新手，拿到那些项目的源码，我看的很吃力，很懵。不论我是急于实现一个后台管理的web页面，还是想学习web前端开发，直接从开源的项目开始都不是一个好办法。就如同直接上手Vue一样。

3、第三周

经过基础学习和开源项目从选择到放弃之后，就开始了老老实实的用Vue3从0搭建项目了。从一开始的欢迎界面 到 登录界面，再到主页的导航栏，一个个的自撸。

这里就是一个不断学习、不断熟练的过程，一开始一个登录界面都需要一天，慢慢的， 一天几个页面。 同时也了解到了一些基于vue的第三方ui库，真是一样一样的，游戏引擎有各种gui库，web也一样。我这里使用的是element plus，很不错，文档例子可以直接拷过来用。想学的深入的话，也可以去B站上看视频。 就这样带校验的表单、导航栏等就解决了。当可以真实校验并登录，主页面可以不断的切换子页面，那一刻还是有一些成就感的哈。

4、第四周

就到了最核心的功能了，图表功能。游戏的留存、注册、登录、在线等情况都需要图表进行数据展示。这里我使用的echarts，好在网上例子挺多，这个上手也快。当然，也遇到一些坑，比如多个图表组件的resize的问题，组件的重复利用问题（我想过避免重复加载， 减少不必要的开销）。好像都是因为我的已有经验带来的惯性思维导致的，好似别人有的，别人怎么实现的，你也要有，你也要这么弄....

其实也有vue特有的， 我在别的地方没有见过的，比如查找兄弟组件的方式。本来按照我之前的前端经验，我可能都老老实实的遍历，然后根据设定的名字来查找某个控件的兄弟控件了，但是没想到vue里居然有专门的变量存储某个控件的前、后兄弟控件。

搞二级界面，teleport没时间研究了（来新活了），就用router，效果差不多。

总的一点，思维要灵活，会变通。

写在最后：

Web前端开发涉及的东西还是挺多的，我这一个月，学习+实战，只是勉强做了一个基础简单的游戏后台管理网站。离真正的一名合格的Web前端开发者还是有不少的差距的。目前对html标签，css样式都还记的不全，vue的用法、特性也只是了解了小部分。Element plus、echarts更是按需了解了一点点而已。

但是Web前端开发的大门已经打开。

如果下次再有web前端开发的需求摆在我面前，我就可以一点都不怂的顶上去了~！