7.webpack-创建列表隔行变色项目

最新推荐文章于 2022-05-27 21:00:19 发布

�Distance.?

最新推荐文章于 2022-05-27 21:00:19 发布

阅读量183

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/weixin_45847120/article/details/104329312

版权

webpack 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

前端工程化-Node.js中通过babel体验ES6模块化

设置淘宝镜像
一台电脑只需要设置一次

npm config set registry “https://registry.npm.taobao.org”
2. 创建项目文件夹
名称不要使用中文不能使用 webpack 因为会和第三方模块webpack名称冲突

推荐使用: webpack-study

在这里插入图片描述
3. 打开cmd窗口
在地址栏输入cmd 然后回车打开cmd窗口

在这里插入图片描述

初始化项目
注意: 使用npm 不要使用cnpm

npm init -y
在这里插入图片描述

创建 src 目录
创建 index.html 文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>webpack-study</title>
</head>
<body>
  <ul>
    <li>这是第01个li</li>
    <li>这是第02个li</li>
    <li>这是第03个li</li>
    <li>这是第04个li</li>
    <li>这是第05个li</li>
    <li>这是第06个li</li>
    <li>这是第07个li</li>
    <li>这是第08个li</li>
    <li>这是第09个li</li>
    <li>这是第10个li</li>
  </ul>
</body>
</html>

在这里插入图片描述

安装依赖jQuery模块
npm i -S jquery
创建js脚本文件 index.js
加入jquery.js的引用

在这里插入图片描述

完善 index.js
import $ from “jquery”

$(function() {
$(“li:odd”).css(“backgroundColor”, “pink”)
$(“li:even”).css(“backgroundColor”, “lightblue”)
})
在这里插入图片描述

查看效果
提示语法错误 es6的import语法浏览器不支持

解决方式
在项目中安装和配置webpack

�Distance.?

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
7.webpack-创建列表隔行变色项目

前端工程化-Node.js中通过babel体验ES6模块化设置淘宝镜像一台电脑只需要设置一次npm config set registry “https://registry.npm.taobao.org”2. 创建项目文件夹名称不要使用中文不能使用 webpack 因为会和第三方模块webpack名称冲突推荐使用: webpack-study3. 打开cmd窗口在地址栏输...
复制链接

扫一扫