Visual Studio Code初識與自動化構建工具安裝

時間 2019-11-22

標籤 visual studio code 自動化構建工具安裝欄目 Visual Studio 简体版

原文原文鏈接

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

要本身手動在本地新建，而後再點擊文件->打開文件夾便可。html

以後你就能夠任意添加文件了前端

2.如何使用自動化構建工具

經過自動化構建工具，用戶能夠保存代碼就能夠看到前端效果，不須要一直刷新網頁node

2.1首先要安裝npm(包管理工具),下載地址以下

https://www.npmjs.com/npm

安裝完以後在控制檯輸入 npm -v 和 node -v 看看安裝成功沒有app

2.2在控制檯裏面全局安裝parcel

鍵入命令：npm install -g parcel-bundler工具

2.3大功告成

3.功能試驗

3.1我新建了一個文件夾parcel_test

3.2內容以下

index.js,不引入js代碼實時更新會失效。ui

console.log("Hello World!")

index.htmlspa

<!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>