前端工程化

今天和一个资深的前端开发前辈聊了聊，我说作为一个非专业的前端爱好者，该怎么快速学习前端的知识。这位前辈这样说，“你应该庆幸你是因为爱好才学习前端知识，而不是为了谋生而学习。还有从开始就不要把自己作为一个业余的开发者去学习，只要是你爱好的就应该成为学习动力，努力之后一定可以成为专业的开发者。”这番话对我感触挺大的，有爱好并为之努力，一定可以收获更多。

然后这个前辈就分享了以前学习前端的过程，就是先用记事本写HTML页面结构，然后加入CSS进行排版美化页面，后来再写一些js代码增加交互功能，根据实际需求，需要多少页面就创建多少个页面。

但现在的前端开发，早就进入了工程化开发的时代，已经存在有各种现代化的框架，编译工具以及预处理器等等。

下面就传统和工程化的前端开发优劣介绍下：

传统开发：没有采用工程化工具和流程的情况下进行开发，通常需要开发者手动管理文件、依赖和构建过程。

优势： 1、入门快，不需要额外学习配置工具和流程 2、灵活，根据需求喜好选择合适工具，直接操作DOM 3、轻量：没有复杂的构建和工具依赖，项目体积小

劣势： 1、效率低，手动管理较多，缺乏自动化工具和流程 2、维护难，没有统一的代码风格，团队协作难 3、难扩展，缺少模块化和组件化

工程化：

优势就是传统化所存在的问题的解决 1、组件化，效率高 2、代码质量提升 3、自动化工具和流程 4、按需导入导出 等等

劣势： 1、入门稍慢 2、灵活性不如传统开发 3、复杂度较高

这只是简单的介绍，其实有更多的知识点在这里面，更多的是因为工程化开发是现代前端开发的必备项了。因为可以看看招聘需求： 1、掌握主流框架vue、react、angular 2、精通组件化、模块化开发、构建工具（webpack、vite、grunt…）基本要求都要精通，所以说工程化开发是必须的。 3、还得会移动端开发、网络协议、数据库操作

这一顿看下来，就明白了前辈为什么会说那番话。

可以看到现在的招聘需求都要掌握主流框架，然而对于我来说，是一开始就接触了vue，因为还没有用过react和angular框架，所以这里就没法站在小白的角度来分析那种框架更容易上手，因为vue比较火就拿来用了，仅此而已。

为什么说要掌握主流框架是必备，因为前端框架就是前端工程化开发中不可或缺的一部分。框架肯定是利用了现有行业中优势技术，也能避免大家不断重复造轮子，降低上手难度，提升开发效率。所以本周接下来的分享内容就主要是围绕vue框架。

还有一个原因就是市场上对于vue技术栈的需求量是比较大的，还有就是vue框架据前辈经验，上手门槛相比于其他框架更低些，只要掌握HTML、CSS、Js就可以上手，所以从vue开始学习和入门前端工程化是合适的。

vue基础：

官网： https://cn.vuejs.org/

这里就简单提一下如何初始化一个vue应用，要注意的一些点：

前提： 1、熟悉命令行 2、安装16+版本的nodejs

运行命令： npm init vue@latest

这个命令行是安装并执行 create-vue，它是 Vue 官方的项目脚手架工具，根据提示选择即可。

cd npm install npm run dev

到这就可以看见初始页面了。

vue的两个核心功能： 1、声明式渲染 2、响应性

对于这两个核心功能，以我目前的水平还无法很通俗易懂的讲解给大家，但是可以简单理解为如下： 声明式渲染：vue有自己的一套模板语法，你只要用vue的模版语法，就可以将数据绑定到DOM元素上，然后使用vue的指令来声明这种行定，然后数据变化后，vue就能自动更新DOM元素，总之这样一来，开发界面会更加直观和简单。

响应性，就是检测数据变化，然后自动更新DOM元素的一种机制。不用手动操作DOM更新。

然后就是去实践，比学理论感触更深！

先把官网给的例子学一遍：

https://cn.vuejs.org/examples/#hello-world

小分享

使用antd ui的轮播图组件：

官网上是叫Carousel 走马灯：

代码如下：

这里只有数字的转换，改成图片即可：

效果如下：