vue入门（一）前端工程化与 webpack

1、前端工程化

前端工程化的解决方案

目前主流的前端工程化解决方案：

• ⚫ webpack（ https://www.webpackjs.com/ ）
• ⚫ parcel（ https://zh.parceljs.org/ ）

2、webpack 的基本使用

概念：webpack 是 前端项目工程化的具体解决方案 。

主要功能：它提供了友好的 前端模块化开发 支持，以及 代码压缩混淆 、 处理浏览器端 JavaScript 的兼容性 、 性能优化 等强大的功能。

好处：让程序员把 工作的重心 放到具体功能的实现上，提高了前端 开发效率 和项目的 可维护性 。

注意：目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的。

2. 创建列表隔行变色项目

• ① 新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json
• ② 新建 src 源代码目录
• ③ 新建 src -> index.html 首页和 src -> index.js 脚本文件
• ④ 初始化首页基本的结构
• ⑤ 运行 npm install jquery –S 命令，安装 jQuery
• ⑥ 通过 ES6 模块化的方式导入 jQuery，实现列表隔行变色效果