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修改时，不需要刷新网页就能看到效果。
Visual Studio Code初识与自动化构建工具安装的更多相关文章
- gulp自动化构建工具安装使用（1）
我用的是windows,所以以下操作针对于windows用户,其他系统有不一样的地方请自行查阅资料更正. 好了,废话少说,反正也就是随手捣腾.下雨了,天晴了,我们开始搞gulp了 安装:gulp是个构 ...
- 初识Visual Studio Code 一.使用Visual Studio Code 开发C# 控制台程序
原文:初识Visual Studio Code 一.使用Visual Studio Code 开发C# 控制台程序 1. 安装.NET Core 安装包下载地址:https://www.microso ...
- 【实验手册】使用Visual Studio Code 开发.NET Core应用程序
.NET Core with Visual Studio Code 目录 概述... 2 先决条件... 2 练习1: 安装和配置.NET Core以及Visual Studio Code 扩展... ...
- Visual Studio Code配置GoLang开发环境
Visual Studio Code配置GoLang开发环境 在Visual Studio Code配置GoLang开发环境 作者:chszs,未经博主允许不得转载.经许可的转载需注明作者和博客主页: ...
- Visual Studio Code 1.0发布：100+语言，300+pull请求，1000+扩展
在第一个预览版发布一年后,微软发表了Visual Studio Code 1.0. 在//BUILD 2015大会上,微软宣布,他们的一个团队需要几个月来创建Visual Studio Code的第一 ...
- Visual studio code离线安装插件
Visual studio code离线安装插件 公司研发区不能连接公网,使用Visual studio code(vsc)写Golang代码需要安装Go插件,下面介绍下,vsc离线安装插件的步骤.以 ...
- 在 Ubuntu 中使用 Visual Studio Code
前言 我一直在 Linux 桌面系统下的探索寻找各种界面美观.使用舒适的软件工具.对于Linux下的开发人员来讲,这几年最大的福利就是 MicroSoft 推出的 Visual Studio Code ...
- 宣布Visual Studio Code Installer for Java
自从第一个Java语言服务器在微软苏黎世办公室的一个小型会议室的黑客马拉松中开发已经差不多3年了,该会议室的人员来自Red Hat,IBM,Codenvy和Microsoft,后来成为Visual S ...
- 全流程指导Visual Studio Code+Markdown Nice+gitee+PicGo管理自己的技术博客文章
全流程指导Visual Studio Code+Markdown Nice+gitee+PicGo管理自己的技术博客 1.背景 我挺喜欢写博客,但每一次将博客转移到公众号或者知乎,总是需要调整格式,不 ...
随机推荐
- UVA10692：Huge Mods
题面 传送门 题意 输入正整数a1,a2,a3..an和模m,求a1^a2^...^an mod m Sol 首先有\[ a^b\equiv \begin{cases} a^{b\%\phi(p)}~ ...
- 设置mysql密码 Access denied 问题
原文:http://www.upwqy.com/details/31.html 在Mac上安装完mysql以后 在终端执行 /usr/local/mysql/bin/mysql 可以直接进入.但是在设 ...
- Ubuntu 16.04 安装Mysql 5.7 踩坑小记
title:Ubuntu 16.04 安装Mysql 5.7 踩坑小记 date: 2018.02.03 安装mysql sudo apt-get install mysql-server mysql ...
- HashSet实现不重复储值原理-附源码解析
在HashSet中,基本的操作都是由HashMap底层实现的,因为HashSet底层是用HashMap存储数据.当向HashSet中添加元素的时候,首先计算元素的hashcode值,然后用这个(元素的 ...
- 关于win8/win8.1系统不能调节亮度的解决办法
有时候我们重装了win8系统之后开始可以调节亮度,但是再重新安装了显卡驱动之后发现不能调节亮度了,解决办法就是添加一项注册表. 下载地址:http://7xnarc.com1.z0.glb.cloud ...
- python 全栈开发，Day4
python之文件操作 一.文件操作基本流程 计算机系统分为:计算机硬件,操作系统,应用程序三部分. 我们用python或其他语言编写的应用程序若想要把数据永久保存下来,必须要保存于硬盘中,这就涉及到 ...
- 请详细描述（以硬盘启动）Linux系统从打开主机电源到进入登录界面整个过程的流程。
1. 开机进行BIOS(BIOS(Basic Input / Output System)自检测系统外围硬件设备如CPU.内存.IO.显卡.鼠标键盘等.根据BIOS中设置的系统启动顺序搜索用于启动系统 ...
- JSP中动态include和静态include区别
静态include(<%@ include file=""%>): 静态include(静态导入)是指将一个其他文件(一个jsp/html)嵌入到本页面 jsp的inc ...
- 在 Rolling Update 中使用 Health Check - 每天5分钟玩转 Docker 容器技术（146）
上一节讨论了 Health Check 在 Scale Up 中的应用,Health Check 另一个重要的应用场景是 Rolling Update.试想一下下面的情况: 现有一个正常运行的多副本应 ...
- JavaEE Servlet 核心方法及生命周期
做JavaWeb开发,免不了要和Servlet打交道.Servlet是Sun(Oracle)官方定义的一个Web开发规范,所有Servlet开发都必须遵守.自己以前也没有从头做过Web开发,所以这方面 ...