Visual Studio Code初识与自动化构建工具安装
1.Visual Studio Code如何新建文件夹
要自己手动在本地新建,然后再点击文件->打开文件夹即可。
之后你就可以任意添加文件了
2.如何使用自动化构建工具
通过自动化构建工具,用户可以保存代码就可以看到前端效果,不需要一直刷新网页
2.1首先要安装npm(包管理工具),下载地址如下
安装完之后在控制台输入 npm -v 和 node -v 看看安装成功没有
2.2在控制台里面全局安装parcel
键入命令:npm install -g parcel-bundler
2.3大功告成
3.功能试验
3.1我新建了一个文件夹parcel_test
3.2内容如下
index.js,不引入js代码实时更新会失效。
console.log("Hello World!")
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <!-- <link rel="stylesheet" href=""> --> <style> #app{ color: red; width:200px; height: 200px; background-color: pink } </style> </head> <body> <div id="app"> Hello world! </div> <script src="js/index.js"></script> </body> </html>
3.3键入命令
npm init -y
再输入parcel index.html
按住ctrl打开localhost:1234
这时候你就打开了网页,当你把style里的color修改时,不需要刷新网页就能看到效果。