安装所需环境并做第一个项目

2022-6-28

安装node.js

因为原来已经安装过了这里就放一个我老师的博客吧
安装node.js

创建 行颜色奇偶变换 工程目录

• 工程文件夹
  
• 在导航栏输入CMD打开终端
  
• 输入npm init -y
  
  这里的-y是默认的也可以不写
  之后会得到一个文件package.json
  

下载jQuery

在刚才的命令提示行中输入 为什么加了参数S下面会解释

npm install jquery -S

完成之后我们进入vscode然后打开package.json

我们能看见在 dependencies下有jquery
上面命令中的 -S 是–save的简写为告诉npm jquery下载好了之后帮我导入package.json的文件里

创建index.html文件

创建index.html文件并且输入9行项目

创建index.js文件

在index.js文件中我们写入奇偶变色的代码

运行~报错

我们运行index.html之后发现报错

通过查询发现是浏览器不兼容
这时候我们就要用一个webpack解决兼容性

安装webpack解决兼容性问题

npm istall webpack@5.42.1 webpack-cli@4.7.2 -D

在刚才的命令提示窗口使用该命令即可安装webpack
这里的**-D**是–save-dev缩写，结果和上面一样只不过他们不是同一个所属

在根目录创建webpack.config.js

• 创建webpack.config.js 的webpack配置文件，并初始化基本配置

• 在package.json的scripts节点下新增dev脚本 新增脚本时要在上一个后面加上 , 逗号
  
  这里脚本的注释在上一个截图里，因为该文件是json，虽然JSON5已经支持注释，为了影响后续，则没有写注释

运行脚本webpack

npm run dev

在刚才的命令提示窗口输入该行命令

• 这时候哦我们会发现在我们的目录里多出了一个文件夹 dist，并且dist下有一个main.js
  

替换脚本文件

这时候我们在主页里面替换我们的脚本文件

• 然后在运行index.html
  
  如果报错了就打开控制台看看哪里报错，我打错了一个css的属性，找了半天，看了控制台才找到问题
  
  最后这个main.js包含了我们自己写js和jquery的所有代码
  ~未完