(一)前端工程化与Webpack

Vue2.0之前端工程化与Webpack

1. 前端工程化

1.1 小白眼中的前端开发
  • 会写HTML+ CSS +JavaScript就会前端开发
  • 需要美化页面样式,就拽一个bootstrap过来
  • 需要操作DOM或发起Ajax请求,再拽一个jQuery过来
  • 要快速实现网页布局效果,就拽一个Layui过来
1.2 实际的前端开发
  • 模块化(js 的模块化、css的模块化、资源的模块化)
  • 组件化(复用现有的UI结构、样式、行为)
  • 规范化(目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理)
  • 自动化(自动化构建、自动部署、自动化测试)

2. 什么是前端工程化

  • 前端工程化指的是:在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
  • 企业中的Vue 项目和React项目,都是基于工程化的方式进行开发的。
  • 好处:前端开发自成体系,有一套标准的开发方案和流程。

3. 前端工程化的解决方案

3.1 早期的前端工程化解决方案
  • grunt(https:// www.gruntjs.net/ )
  • gulp(https://www.gulpjs.com.cn/ )
3.2 目前主流的前端工程化解决方案
  • webpack(https://www.webpackjs.com/)
  • parcel(https://lzh.parceljs.org/)

4. Webpack的基本使用

4.1 什么是webpack
  • 概念:webpack是前端项目工程化的具体解决方案。
  • 主要功能:它提供了友好的前端模块化开发支持,以及代码压缩混淆、处理浏览器端JavaScript 的兼容性、性能优化等强大的功能。
  • 好处:让程序员把工作的重心放到具体功能的实现上,提高了前端开发效率和项目的可维护性。
4.2 创建列表隔行变色项目

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <!-- <script src="./index.js"></script> -->
  <!-- <script src="/dist/main.js"></script> -->
  <!-- 访问内存中的js文件 -->
  <script src="/main.js"></script>
</head>
<body>
  <!-- ul>(li{
   这是第$个li})*6 -->
  <ul>
    <li>这是第1个li</li>
    <li>这是第2个li</li>
    <li>这是第3个li</li>
    <li>这是第4个li</li>
    <li>这是第5个li</li>
    <li>这是第6个li</li>
  </ul>
</body>
</html>
// 使用ES6导入语法
import $ from 'jquery'
// 定义jQuery的人口函数
$(function 

你可能感兴趣的:(Vue2.0,vue,webpack,前端)