今天和一个资深的前端开发前辈聊了聊，我说作为一个非专业的前端爱好者，该怎么快速学习前端的知识。这位前辈这样说，“你应该庆幸你是因为爱好才学习前端知识，而不是为了谋生而学习。还有从开始就不要把自己作为一个业余的开发者去学习，只要是你爱好的就应该成为学习动力，努力之后一定可以成为专业的开发者。”这番话对我感触挺大的，有爱好并为之努力，一定可以收获更多。
然后这个前辈就分享了以前学习前端的过程，就是先用记事本写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基础：
官网：
代码语言：javascript复制https://cn.vuejs.org/这里就简单提一下如何初始化一个vue应用，要注意的一些点：
前提：
1、熟悉命令行
2、安装16 版本的nodejs
运行命令：
代码语言：javascript复制npm init vue@latest这个命令行是安装并执行 create-vue，它是 Vue 官方的项目脚手架工具，根据提示选择即可。
代码语言：javascript复制> cd <your-project-name>
> npm install
> npm run dev到这就可以看见初始页面了。
vue的两个核心功能：
1、声明式渲染
2、响应性
对于这两个核心功能，以我目前的水平还无法很通俗易懂的讲解给大家，但是可以简单理解为如下：
声明式渲染：vue有自己的一套模板语法，你只要用vue的模版语法，就可以将数据绑定到DOM元素上，然后使用vue的指令来声明这种行定，然后数据变化后，vue就能自动更新DOM元素，总之这样一来，开发界面会更加直观和简单。
响应性，就是检测数据变化，然后自动更新DOM元素的一种机制。不用手动操作DOM更新。
然后就是去实践，比学理论感触更深！
先把官网给的例子学一遍：
代码语言：javascript复制https://cn.vuejs.org/examples/#hello-world## 小分享
使用antd ui的轮播图组件：
官网上是叫Carousel 走马灯：
代码如下：
代码语言：javascript复制<template>
<a-carousel autoplay>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
</a-carousel>
</template>
<style scoped>
/* For demo */
.ant-carousel :deep(.slick-slide) {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
.ant-carousel :deep(.slick-slide h3) {
color: #fff;
}
</style>官网这里只有数字的转换，改成图片即可：
代码语言：javascript复制<div><img src="path/your/image1-n"></div>效果如下：
今天的分享就到这了，祝学习顺利！
