1、初始化包配置文件管理配置文件
npm init -y
2、创建一个src文件夹
3、创建一个index.html,引入index.js
4、index.html创建ul、li
ul>li{这是第$个li}*9
5、安装jq
npm i jquery -s
6、创建index.js
import $ from 'jquery'
$(function(){
//奇数行
$('li:odd').css('backgroundColor','pink'),
//偶数行
$('li:even').css('backgroundColor','blue');
})
//以上完成后并不能实现隔行变色效果,因为页面解析不了当前inde.js的高阶js用法
解决:
1、安装相关依赖包
npm i webpack webpack-cli -D
2、创建webpack.config.js
module.exports = {
//编译模式
mode:'development'//development production
}
3、在package.json中增加
"dev":"webpack"
4、执行
npm run dev
会生成一个dist文件夹,里面会有一个main.js文件即等同于index.js
然后再index.html中引用main.js