Visual Studio Code初识与自动化构建工具安装

1.Visual Studio Code如何新建文件夹

要自己手动在本地新建，然后再点击文件->打开文件夹即可。

之后你就可以任意添加文件了

2.如何使用自动化构建工具

通过自动化构建工具，用户可以保存代码就可以看到前端效果，不需要一直刷新网页

2.1首先要安装npm(包管理工具),下载地址如下

https://www.npmjs.com/

安装完之后在控制台输入 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修改时，不需要刷新网页就能看到效果。