前端工程化浅谈

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

然后这个前辈就分享了以前学习前端的过程，就是先用记事本写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 <your-project-name>
> 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 走马灯：

代码如下：

<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>

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

<div><img src="path/your/image1-n"></div>

效果如下：

今天的分享就到这了，祝学习顺利！