Vue学习笔记-奇偶行变色

实际前端开发
模块化(js、css模块化、资源的模块化)
组件化(复用现有的UI结构、样式、行为)
规范化(目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理)
自动化(自动化构建、自动部署、自动化测试)

webpack基本使用
前段工程化的具体解决方案
提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大功能

动手创建隔行变色项目
1.新建项目空白目录，并运行 npm init -y 初始化包管理配置文件package.json
2.新建scr源代码目录
3.新建index.html首页和index.js脚本文件
//index.html中使用ul和li标签
//因为下文jQuery用到的是li
4.初始化首页基本的结构
5.运行 npm install jquery -S 安装jQuery
//-S参数可省略 完整为--save
//在package.json可看到dependencies下有jquery版本
6.通过ES6模块化的方式导入jQuery

//此处为index.js文件内
import $ from "jquery"
//定义jQuery的入口函数
$(function(){
    //实现奇偶行变色
    //奇数行
    $('li:odd').css('background-color','green')
    $('li:even').css('background-color','red')
})

在html中引入js后运行
没有任何效果
浏览器控制台报错
此时进行webpack的安装
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
//-D 同上 节点不通 此时在devDependencies中 是--save-dev的简写
//开发阶段和上线部署都要用到的放在dependencies而只在开发阶段使用的放在devDependencies中
//参照官方文档即可

项目中配置webpack
1.项目根目录创建webpack.config.js文件并写入以下内容

//使用Node.js中的导出语法，向外导出一个webpack配置对象
module.exports = {
    //运行模式 development（开发阶段）或production（上线部署）
    mode: 'development'
}

2.在package.json的scrip节点新增dev脚本

"dev":"webpack"

//dev为脚本名 值为webpack
3.终端运行 npm run dev 运行进行打包构建
//如果出现报错A complete log of this run can be found in 保存一下前面所写的代码即可
此时在dist文件夹中会生成main.js的文件
将index.html中引入的index.js改为main.js文件就可以实现了

//本项目前记得先安装Node.js 具体可百度 不再赘述
//项目上线将webpack.config.js中mode的值改为production文件更小
//main.js被进一步压缩