bilibiliHome

02 项目准备 ​

这节课将为你介绍如何准备一个项目，并熟悉项目的基本结构。

Todo 课程任务

  • 开发工具
  • 项目结构
  • 公共代码

开发工具 ​

开发工具是用来开发应用程序的软件，它可以帮助我们更快地编写代码，更好地调试代码，更好地管理代码。

VS Code ​

Visual Studio Code（VS Code）是一款由 Microsoft 开发的免费、开源的代码编辑器。它成为了许多开发者和程序员的首选工具，因为它轻量、强大，并且支持多种编程语言。

  1. 跨平台： Visual Studio Code 可在 Windows、macOS 和 Linux 操作系统上运行，使得开发者在不同平台之间更容易切换而不需要改变开发环境。
  2. 轻量快捷： VS Code 是一款相对轻量级的编辑器，启动速度快，占用系统资源较少，使得用户在编辑大型项目时也能保持高效。
  3. 内置 Git 支持： VS Code 集成了 Git 版本控制，使得用户能够在编辑器中进行代码版本管理、提交、推送和拉取等操作。
  4. 强大的扩展系统： VS Code 通过扩展插件系统支持丰富的第三方插件。这使得用户可以根据自己的需求安装各种插件，扩展编辑器的功能，支持不同的编程语言、框架和工具。
  5. 智能代码补全： VS Code 提供了强大的代码补全功能，通过智能感知用户的输入，提供可能的代码建议，加速代码编写过程。
  6. 集成调试器： 内置了调试器，支持多种语言的调试，用户可以在编辑器中设置断点、单步执行代码等。
  7. 多语言支持： VS Code 支持多种编程语言，包括但不限于 JavaScript、TypeScript、Python、Java、C#等，且可通过安装相应的扩展支持更多语言。
  8. 定制化： 用户可以根据自己的喜好定制编辑器的外观、主题和快捷键设置，使得编辑器更符合个人的使用习惯。
  9. 集成终端： 内置了终端，用户无需离开编辑器即可执行命令，进行终端操作。

安装 ​

官网：https://code.visualstudio.com

powershell
scoop bucket add extras
scoop install extras/vscode

scoop bucket add versions
scoop install versions/vscode-insiders

配置 ​

Live Server: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

  • Live Server 是一款用于 Visual Studio Code 的扩展插件，它提供了一个简单而强大的本地开发服务器，用于在浏览器中实时预览和调试你的网页项目。
  • 安装 Live Server 插件：
    • 打开 VS Code 按下 Ctrl+P
    • 输入 ext install ritwickdey.liveserver
  • 使用 Live Server 插件：
    • 在你的 HTML 文件中右键点击，并选择 "Open with Live Server"。
    • 这将启动一个本地服务器，并在默认浏览器中打开你的项目。
    • 当你保存文件时，浏览器会自动刷新以显示最新的更改。

浏览器 ​

浏览器是用户与互联网进行交互的主要途径，也是开发者进行调试和测试的主要工具。

五大浏览器 ​

  1. Google Chrome（谷歌浏览器）： 由谷歌公司开发，目前是全球最受欢迎的浏览器之一。
  2. Mozilla Firefox（火狐浏览器）： 由 Mozilla 基金会和志愿者团队共同开发，注重用户隐私和开放源代码。
  3. Microsoft Edge： 微软公司推出的浏览器，是 Windows 10 默认的浏览器，后来基于 Chromium 引擎进行了重建。
  4. Apple Safari： 苹果公司为其操作系统（macOS 和 iOS）开发的浏览器。
  5. Opera： 由 Opera Software 公司开发，提供快速浏览和许多内置功能，如广告拦截器和虚拟私人网络（VPN）。

安装浏览器 ​

powershell
# chrome
scoop install extras/googlechrome

# ungoogled-chromium
scoop install extras/ungoogled-chromium

# firefox
scoop install extras/firefox

# edge
scoop bucket add nonportable
scoop install nonportable/microsoft-edge-beta-np

# opera
scoop install extras/opera

项目结构 ​

powershell
$ erd -L 1 -I
      0 B ┌─  index.html  # HTML 文件
     77 B ├─  css  # CSS 代码夹
   3794 B ├─  docs	  # 文档
   4286 B ├─  favicon.ico  # 站点 favicon 图标
1437753 B ├─  img  # 图片资源文件夹，设计图
  19983 B ├─  js  # JavaScript 代码
  19287 B ├─  svg  # svg 图标文件夹
1445833 B  bilibiliHome

3 directories, 12 files
🔖 详细目录结构
powershell
$ lsd --tree
 .
├──  css
│   ├──  base.css
│   └──  index.css
├──  docs
│   ├──  lesson2.md
│   └──  svg.txt
├──  favicon.ico
├──  img
│   ├──  carousel1.webp
│   ├──  header-banner.webp
│   ├──  logo.png
│   ├──  web-home-common-cover-01.webp
│   ├──  web-home-common-cover-02.webp
│   ├──  web-home-common-cover-03.webp
│   ├──  web-home-common-cover-04.webp
│   ├──  web-home-common-cover-05.webp
│   └──  web-home-common-cover-06.webp
├──  index.html
├──  js
│   └──  iconpark.js
├──  README.md
└──  svg
    ├──  up.svg
    ├──  下载客户端.svg
    ├──  专栏.svg
    ├──  分区.svg
    ├──  创作中心.svg
    ├──  动态.svg
    ├──  历史.svg
    ├──  右箭头.svg
    ├──  大会员.svg
    ├──  客服.svg
    ├──  左箭头.svg
    ├──  弹幕数.svg
    ├──  投稿.svg
    ├──  搜索按钮.svg
    ├──  播放量.svg
    ├──  收藏.svg
    ├──  新歌热榜.svg
    ├──  更多.svg
    ├──  活动.svg
    ├──  消息.svg
    ├──  热门.svg
    ├──  直播.svg
    ├──  社区中心.svg
    ├──  课堂.svg
    ├──  顶部.svg
    ├──  频道.svg
    └──  首页.svg

公共代码 ​

一些常见的 CSS 公共代码模块，它们可以用作基础样式，提供一致的外观和感觉。

  1. CSS Reset：

    • 重置浏览器默认样式或规范化样式，以确保在不同浏览器中有一致的基础样式。
    css
    /* CSS Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

  2. 清除浮动（clearfix）：

    • 用于处理浮动元素引起的父元素塌陷的问题。
    css
    .clearfix::after {
  content: '';
  display: table;
  clear: both;
}

  3. 全局字体设置：

    • 为整个页面设置默认字体样式。
    css
    body {
  font-family: 'Arial', sans-serif;
}

  4. 禁用文本选中：

    • 防止用户在页面上选择文本。
    css
    body {
  user-select: none;
}

  5. 隐藏滚动条：

    • 隐藏页面滚动条。
    css
    body {
  overflow: hidden;
}

  6. 默认链接样式：

    • 去除链接的下划线并提供一致的颜色。
    css
    a {
  text-decoration: none;
  color: #007bff;
}

a:hover {
  text-decoration: underline;
}

  7. 去除列表项的默认样式：

    css
    ul,
ol,
li {
  list-style: none;
}

Normalize.css ​

csstools/normalize.css: A cross-browser CSS foundation

Normalize.css 是一个用于在不同浏览器之间创建一致的基本样式的 CSS 文件。它的目标是通过在所有浏览器中消除默认样式的差异，从而提供更为一致和规范的外观。

html
<link href="https://unpkg.com/@csstools/normalize.css" rel="stylesheet" />

sanitize.css ​

csstools/sanitize.css: A best-practices CSS foundation

sanitize.css 是一个 CSS 库，它提供了 HTML 元素的一致的、跨浏览器的默认样式以及有用的默认值。

html
<link href="https://cdn.skypack.dev/sanitize.css" rel="stylesheet" />
<link href="https://unpkg.com/sanitize.css/forms.css" rel="stylesheet" />
<link href="https://unpkg.com/sanitize.css/assets.css" rel="stylesheet" />
<link href="https://unpkg.com/sanitize.css/typography.css" rel="stylesheet" />
<link href="https://unpkg.com/sanitize.css/reduce-motion.css" rel="stylesheet" />
<link href="https://unpkg.com/sanitize.css/system-ui.css" rel="stylesheet" />
<link href="https://unpkg.com/sanitize.css/ui-monospace.css" rel="stylesheet" />

Eric Meyer ​

CSS Tools: Reset CSS

html
<link href="https://meyerweb.com/eric/tools/css/reset/reset.css" rel="stylesheet" />