零基础初学前端—新建项目

对于一个没有基础的新手来说，如何使用 vscode 新建一个前端项目，写一些html页面，并能进行运行。

需要吐下几个步骤：

新建一个文件夹
在文件夹里新建一个文件，命名为 xxx.html ，例如 index.html
打开 vscode ，File->Open Folder 打开创建好了文件夹
在 index.html 里编辑代码。vscode 自带代码不起功能，我们只需要写一个 html，然后回车，就会生成如下代码:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>my webpage</title>
</head>
<body>
    <h1>Welcome to my webpage!</h1>
</body>
</html>

把里面的 title 和 h1 内容改一下，一个简单的前端页面就生成了
直接右击 index.html 选择在浏览器里打开就可以了

如果你要不断修改和测试 HTML 文件，在 VS Code 中选择“查看”-“终端”并输入以下命令来启动一个临时的 Web 服务器，前提是已经装好了 python 环境

python -m http.server

启动一个临时的 Web 服务器的主要目的是在本地计算机上提供一个 Web 服务器环境，以便在浏览器中实时预览和测试你的网站或 Web 应用程序。

通常，在本地使用文件协议来打开 HTML 文件会有限制。例如，某些浏览器不允许使用文件协议（file://）来加载跨域资源。因此，推荐的方式是使用 HTTP 协议（http://localhost:8000/index.html），这样可以避免这些限制。

通过在终端输入命令 python -m http.server 可以快速创建一个简单的 Web 服务器。这个命令会在当前目录下启动一个 Web 服务器，并监听在默认端口 8000 上。你可以在浏览器中访问 http://localhost:8000 来查看项目文件。

需要注意的是，这个 Web 服务器只是一个用于本地测试和开发的简单服务器，不应该用于生产环境。在生产环境中，通常需要更强大、可扩展和安全的 Web 服务器。

具体操作如下：

cd 到文件夹
查看python版本，如果没安装先安装
python -m http.server

➜  ~ python --version                                
Python 3.9.6
➜  ~ cd /Users/morris/Desktop/test 
➜  test python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...

请添加图片描述
服务开启之后再打开index.html ，或者直接使用localhost:8080访问我们的页面就可以了。

零基础初学前端—新建项目

猜你喜欢