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

时间：2023-02-27 07:41:31

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

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

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

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

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

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

https://www.npmjs.com/

安装完之后在控制台输入 npm -v  和 node -v 看看安装成功没有

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

2.2在控制台里面全局安装parcel

键入命令：npm install -g parcel-bundler

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

2.3大功告成

3.功能试验

3.1我新建了一个文件夹parcel_test

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

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

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

再输入parcel index.html

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

按住ctrl打开localhost:1234

这时候你就打开了网页，当你把style里的color修改时，不需要刷新网页就能看到效果。

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

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

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

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

  2. 初识Visual Studio Code 一&period;使用Visual Studio Code 开发C&num; 控制台程序

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

  3. 【实验手册】使用Visual Studio Code 开发&period;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&period;0发布：100&plus;语言，300&plus;pull请求，1000&plus;扩展

    在第一个预览版发布一年后,微软发表了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&plus;Markdown Nice&plus;gitee&plus;PicGo管理自己的技术博客文章

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

随机推荐

  1. &lbrack;转载&rsqb;UML类图总结

    前言 类图和序列图是UML中最常用的两种Diagram.我将做详细的总结.在许多书中,或者网站中,在介绍一个系统的子系统的设计时,很多时候,都是给出简单的类图来简述构成子系统的类之间的关系.这足以说明 ...

  2. ADF&lowbar;Desktop Integration系列4&lowbar;ADF桌面集成入门之部署ADF Desktop Excel

    2013-05-01 Created By BaoXinjian

  3. lambda 个人学习理解

    lambda是简化代码量的写用更简单的方法来写匿名方法 lambda左边是参数,右边是代码块(方法执行语句). 整体运算结果是根据左边参数,执行右边语句,返回右边执行的结果: 匿名方法是简化方法 1. ...

  4. java 中hashcode和equals 总结

    一.概述            在Java中hashCode的实现总是伴随着equals,他们是紧密配合的,你要是自己设计了其中一个,就要设计另外一个.当然在多数情况下,这两个方法是不用我们考虑的,直 ...

  5. Apache 2&period;2 到 2&period;4的不同

    1.权限设定方式变更 2.2使用Order Deny / Allow的方式,2.4改用Require apache2.2: Order deny,allowDeny from allapache2.4 ...

  6. jquery之全选全不选

    <input type="checkbox" onclick="selall(this)" />全选/全不选 <input type=&quo ...

  7. Linux系统软件安装的几种方式

    Linux系统,一个文件能不能执行看的是有没有可执行权限x,不过真正的可执行文件是二进制文件(binary file),举例来说Linux上的c语言源码编写完后,通过gcc程序编译后就可以创建一个可执 ...

  8. linux系统服务详解

    下面现介绍一下运行次序和运行级别: 一个 Linux 系统的引导过程可以分为几个阶段.我们主要看看当内核加载后的那一个阶段.你可以运行runlevel 命令来确定您的系统当前的运行级,当内核被加载并开 ...

  9. Xamarin&period;Android 无法检索到 Resource 问题

    错误提示:当前上下文中不存在名称"Resource" 解决方法: 1.看是否有其他错误,如果有其他错误优先解决.(其他错误导致无法感知到Resource) 2.重新生成解决方案.( ...

  10. ABBYY FineReader 12如何识别包含非常规符号的文本

    ABBYY FineReader 12 是一款OCR图文识别软件,可快速方便地将扫描纸质文档.PDF文件和数码相机的图像转换成可编辑.可搜索的文本,有时文本中可能会包含一些非常规的符号,此时ABBYY ...

相关文章