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修改时，不需要刷新网页就能看到效果。

Visual Studio Code初识与自动化构建工具安装的更多相关文章

  1. gulp自动化构建工具安装使用（1）

    我用的是windows,所以以下操作针对于windows用户,其他系统有不一样的地方请自行查阅资料更正. 好了,废话少说,反正也就是随手捣腾.下雨了,天晴了,我们开始搞gulp了 安装:gulp是个构 ...

  2. 初识Visual Studio Code 一.使用Visual Studio Code 开发C# 控制台程序

    原文:初识Visual Studio Code 一.使用Visual Studio Code 开发C# 控制台程序 1. 安装.NET Core 安装包下载地址:https://www.microso ...

  3. 【实验手册】使用Visual Studio Code 开发.NET Core应用程序

    .NET Core with Visual Studio Code 目录 概述... 2 先决条件... 2 练习1: 安装和配置.NET Core以及Visual Studio Code 扩展... ...

  4. Visual Studio Code配置GoLang开发环境

    Visual Studio Code配置GoLang开发环境 在Visual Studio Code配置GoLang开发环境 作者:chszs,未经博主允许不得转载.经许可的转载需注明作者和博客主页: ...

  5. Visual Studio Code 1.0发布：100+语言，300+pull请求，1000+扩展

    在第一个预览版发布一年后,微软发表了Visual Studio Code 1.0. 在//BUILD 2015大会上,微软宣布,他们的一个团队需要几个月来创建Visual Studio Code的第一 ...

  6. Visual studio code离线安装插件

    Visual studio code离线安装插件 公司研发区不能连接公网,使用Visual studio code(vsc)写Golang代码需要安装Go插件,下面介绍下,vsc离线安装插件的步骤.以 ...

  7. 在 Ubuntu 中使用 Visual Studio Code

    前言 我一直在 Linux 桌面系统下的探索寻找各种界面美观.使用舒适的软件工具.对于Linux下的开发人员来讲,这几年最大的福利就是 MicroSoft 推出的 Visual Studio Code ...

  8. 宣布Visual Studio Code Installer for Java

    自从第一个Java语言服务器在微软苏黎世办公室的一个小型会议室的黑客马拉松中开发已经差不多3年了,该会议室的人员来自Red Hat,IBM,Codenvy和Microsoft,后来成为Visual S ...

  9. 全流程指导Visual Studio Code+Markdown Nice+gitee+PicGo管理自己的技术博客文章

    全流程指导Visual Studio Code+Markdown Nice+gitee+PicGo管理自己的技术博客 1.背景 我挺喜欢写博客,但每一次将博客转移到公众号或者知乎,总是需要调整格式,不 ...

随机推荐

  1. 2018第一波iOS经典笔试题(现场实拍)

    序言 作为一个开发者,眼里不仅仅只存在于那一行又一行的代码,更还有那诗和远方. 注明:面试是对自我审视的一种过程,面试题和iOS程序员本身技术水平没任何关联,无论你能否全部答出,都不要对自己产生任何正 ...

  2. Oracle删除控制文件恢复

    控制文件被删除后,系统崩溃,下面介绍下如何恢复控制文件 SQL> conn / as sysdbaConnected to an idle instance.SQL> startup no ...

  3. C++学习-6

    1.Auto无法区分常量变量,引用常量(顶层const被忽略了),不能识别引用变量,const和&都无法识别 Auto不能放在结构体内部 2.decltype()能识别引用,能获取常量属性,t ...

  4. 基于python创建一个简单的HTTP-WEB服务器

    背景 大多数情况下主机资源只有开发和测试相关人员可以登录直接操作,且有些特定情况"答辩.演示.远程"等这些场景下是无法直接登录主机的.web是所有终端用户都可以访问了,解决了人员权 ...

  5. Node与apidoc的邂逅——NodeJS Restful 的API文档生成

    作为后台根据需求文档开发完成接口后,交付给前台(angular vue等)做开发,不可能让前台每个接口调用都去查看你的后台代码一点点查找.前台开发若不懂你的代码呢?让他一个接口一个接口去问你怎么调用, ...

  6. Firefox配置文件夹详解

    参考此文会帮助你更好的管理和备份Firefox配置文件,此文没有列出的文件大多是Firefox运行时生成的一些随机文件,大多无用,备份或管理配置文件时酌情删除. 在地址栏输入about:support ...

  7. 鹅厂优文 | 决策树及ID3算法学习

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~. 作者:袁明凯|腾讯IEG测试开发工程师 决策树的基础概念 决策树是一种用树形结构来辅助行为研究.决策分析以及机器学习的方式,是机器学习中的 ...

  8. Spring源码学习：第0步--环境准备

    Spring源码现在已托管于GitHub,相比于以前直接从官网下载一个压缩包的方式来说,确实方便了不少. GitHub地址:https://github.com/spring-projects/spr ...

  9. OpenCV与Qt的环境搭建及Demo

    前言: 前段时间写了很多OpenCV的程序,虽然重点在算法上,但图像窗口只能靠cvNamedWindow,效果很不理想.遂希望用Qt配合OpenCV使用,为我的程序建立图形化界面.然而,依我对Open ...

  10. IE常见的兼容处理

    IE常见的兼容处理 1. 禁用IE兼容模式 为了保证IE能够使用最新渲染模式而不是兼容模式,在html文档头部应加入以下代码: <head> <meta charset=" ...