Vue学习继续！！！-CSDN博客

本文链接：https://blog.csdn.net/weixin_64512346/article/details/126822767

一，前端工程化？

前端开发:小白眼中的前端开发：美化页面bootstrap，操作DOM使用jQuery，快速实现网页布局效果：layUI 插件+组件库。

实际中的前端开发（四个现代化）：

1.模块化：（js模块化，CSS模块化）

2.组件化：（有的东西会被复用如layUI已经写好了代码，我们恰好可以使用到，这就是复用，直接复制粘贴，ui结构的组件化）

3.规范化：（目录结构的划分（如images文件，JS文件，CSS文件），编码规范化（const userInfo={name:"sh",age:20}）规范化的（如：关键部位有空格，缩进，命名等））是一个团队最好保证团队的一致性，标准型。***

4.自动化：（自动化构建：写完一个页面，每次完成后保存自动刷新页面，自动部署）

前端工程化：按照项目的标准来进行开发应用。

企业中的Vue和react都是基于工程化（webpack）的方式进行开发。

好处：前端开发自成体系，有一套标准的开发方案和流程，更加的使我们团队变得更加的高效和有竞争力。

前端工程化的解决方案：

webpack（工程的解决方案，工具把概念落到实际）

二、webpack的解决方案

主要功能：代码压缩混淆（缩小体积），处理浏览器的JS的兼容性（在那一版的浏览器都行在旧版本中的IE6,7,8，如let语句）程序员更加大胆的去写高级代码（开发效率高）webpack会转化为低级语言，没有兼容性的，谁懂能看懂，性能优化，好处：程序员把工作中心放在开发效率和可维护性。

体验webpack：（提出需求--->发现问题---->webpack来解决）

1.列表隔行变色案例。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隔行变色</title>
    <script src="../dist/main.js"></script>
    <!-- src代表着程序员的源代码文件 -->
    <!-- 根据node.js下载包文件，我们在根目录里面输入cmd，运行num install（i） jquery -S即可下载第三方的包了 -->
    <!-- "dependencies": {
    "jquery": "^3.6.1"
    } -S明确告诉大家把这个包放在了package.json里的dependencies里面  1.之前咱们会的用法2.ES6里的导入导出-->
    <!-- -S简写等效--save -->
    <!-- SyntaxError:语法错误，刚才我们使用了高级语言，使用webpack来解决 -->
    <!-- 安装webpack的两个包：1. npm install webpack@5.42.1 webpack-cli@4.7.2 -D ①第一个@是用作指定版本号的 ② -D（是--save-dev的简写） "devDependencies": {
    "webpack": "^5.42.1",
    "webpack-cli": "^4.7.2"
  }  -D的明确告诉npm把包放在节点"devDependencies-->
    <!-- dependencies（-S）项目在开发和上线的时候都要使用这个，devDependencies（-D）只在开发阶段使用 自己可以与npm.js官网搜索webpack就可以-->
    <!-- // 只安装不配置是不行的--->
    <!-- 1111.根目录创建一个配置文件webpack.config.js{可以看见这个文件里的module.exports(node.js)里的导出一个配置对象为webpack服务：mode：{1.development（开发模式）2.production（生产上线）}}  -->
    <!-- 2222.在package.json的节点scripts（里边的可以被运行）节点下，新增“dev”脚本：“webpack”(自己起的)z终端（cmd）通过npm run dev 来指定对应脚本执行真正命令（webpack）（终端的表达有asset生成资源（main.js(包含index.js和 node_modules)）） 会发现多了一个dist文件里面的main.js(是将我们的index.js的进行了翻译，他是没有兼容性的，所以我们使用的就是他了)发现成功实现了解决了-->
    <!-- 扩展如何搜索快捷键 -->
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>

</body>

</html>