Vue学习(一)之Vue2前端工程化和WenBack

实际上我们的前端开发

模块化(js的模块化、css的模块化、资源的模块化)

组件化(复用现有的UI结构、样式、行为)

规范化(目录机构的划分、编码规范化、接口规范化、文档规范化、Git分支管理)

自动化(自动化构建、自动部署、自动化测试)

什么是前端工程化

前端工程化指的是:在企业级的前端项目开发中，把前端所需要的工具、技术、流程、经验等进行标准化

企业中的Vue项目和React项目，都是基于工程化的方式进行开发的

好处:前端开发自成体系，有一套标准的开发方案和流程。

前端工程化的解决方案

早期的前端工程化解决方案

        grunt(https://www.gruntjs.net/)

        gulp(https://www.gulpjs.com.cn/)

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

        webpack(https://www.webpackjs.com)

        parcel(https://zh.parceljs.org/)        

WebPack的基本使用

什么是webpack

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

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

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

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

创建列表隔行变色项目

步骤:

        1.新建空白项目,并运行npm init -y 命令，初始化包管理配置文件package.json

        2.新建src源代码目录

        3.新建src -> index.html首页和src -> index.js脚本文件

        4.初始化首页基本结构

        5.运行npm install jquery -S命令安装jQuery

        6.通过ES6模块化的方式导入jQuery,实现列表隔行变色效果

输入cmd进入小黑窗口

运行npm init -y 命令，