Web开发学习备忘录:Day-1

最近工作内容发生了一些变化，由原来的Flutter开发，被转派支持前端web开发，由于之前没有正儿八经的接触过前端开发，所以很懵~，不知道从何看起。

于是就请命直接上项目，边学习边开发，开了权限，拉取了项目看了一下目录结构，对于一个App开发来说还是有些不适应的，有很多不明白的地方，还好我比较谦虚，本着不懂就问的态度，开始了我的前端开发之旅。

项目clone到本地后的第一件事情，就是让它跑起来，看一下效果~。

下面是开发环境的配置：

1.安装Node.js和npm

访问Node.js官方网站下载适合您操作系统的安装包。
安装Node.js。npm (Node Package Manager) 会与 Node.js 一同安装。
通过运行以下命令来验证安装：

bash 复制代码

node -v 
npm -v

2.安装nvm

nvm 是 "Node Version Manager" 的缩写，是一个在单一系统上管理和切换多个 Node.js 版本的工具。以下是其安装步骤：

1. 在 macOS 或 Linux 上安装 nvm

使用以下 cURL 或 Wget 命令从安装脚本安装 nvm：

使用 cURL:

bash 复制代码

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

或使用 Wget:

bash 复制代码

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

此命令会克隆 nvm 存储库到 ~/.nvm，并添加源代码到你的 profile (~/.bash_profile, ~/.zshrc, ~/.profile, 或 ~/.bashrc).

bash 复制代码

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # 这会加载 nvm

注意 : 你可能需要手动打开一个新的终端或运行 source ~/.bash_profile (或你的适当的 shell 配置文件) 使改变生效。

2. 在 Windows 上安装 nvm

对于 Windows，有一个独立的版本叫做 nvm-windows。

访问 nvm-windows 的 releases 页面。
下载最新版本的 nvm-setup.zip 文件。
解压并执行 nvm-setup.exe 文件以开始安装过程。

完成后，重新启动你的终端或命令提示符，然后你应该可以使用 nvm 命令了。

3. 使用 nvm

安装完 nvm 后，你可以使用以下命令安装特定版本的 Node.js:

bash 复制代码

nvm install 14.0.0

查看Node版本

bash 复制代码

nvm ls-remote

切换到该版本:

bash 复制代码

nvm use 14.0.0

查看已安装的版本:

bash 复制代码

nvm ls

以上就是使用 nvm 来管理 Node.js 版本的基本步骤。

通过上面的安装，Node.js已经安装好了，下面就可以把项目跑起来了。

问题来了，如何创建一个与生产项目一样的项目呢？带着这个问题，我就开始了我前端web的学习之路。

了解了项目中使用的框架是 Ant Design，上官网看了一下，感觉无从下手，不知道应该看哪些东西。

出于对生产项目的好奇，于是就想自己怎么用Ant Design去实现一个与生产项目一样的效果的想法，哪怕只是架子是一样的，里面的页面都是Hello world!

开始实现自己的想法：

创建项目

有下面两种方式

yarn

bash 复制代码

$ yarn create react-app example-project-ts --template typescript

npx

bash 复制代码

$ npx create-react-app example-project-ts --template typescript

问题来了，什么是yarn与npx:

yarn 和 npx 都是与 Node.js 和 npm（Node 包管理器）生态系统中的工具。下面是关于它们的简要描述：

yarn

yarn 是一个快速、可靠、安全的依赖管理工具。它是为了解决一些 npm 的问题而创建的，尽管现在的 npm 已经解决了许多这些问题。以下是 yarn 的一些特性：

速度：yarn 使用并行安装来加快安装速度。
锁定文件 ：每次添加一个模块，yarn 都会创建（或更新）一个 yarn.lock 文件。这确保了安装的版本是一致的，从而避免了"它在我的机器上运行得很好"的问题。
更好的安全性：yarn 通过使用 checksum 来确保安装的包没有被篡改。
工作区：yarn 提供了管理 monorepo 的功能。

npx

npx 是 npm 包运行工具，它包含在 npm 5.2.0 及更高版本中。以下是 npx 的一些主要用途和特性：

执行依赖 ：允许用户从 node_modules/.bin 目录执行命令，而不必全局安装它们。
执行未安装的包 ：你可以使用 npx 直接运行尚未安装的包。例如，npx create-react-app my-app 会创建一个新的 React 应用，而不需要全局安装 create-react-app。
运行不同的包版本：可以轻松地使用不同版本的工具，而不必更改全局安装或与其他项目的冲突。
命令不在 PATH 中也可以执行 ：即使某些命令不在你的 PATH 中，你也可以通过 npx 执行它们。

yarn 是一个与 npm 竞争的包管理器，而 npx 是一个在没有全局安装的情况下执行 Node.js 二进制文件和命令的工具。

通过对这两个包理器的了解，我使用的是yarn来创建工程： yarn

bash 复制代码

$ yarn create react-app example-project-ts --template typescript

--template typescript 设置项目模板使用TypeScript

什么是TypeScript:

TypeScript 是一个由 Microsoft 开发的开源编程语言。它是 JavaScript 的一个超集，添加了可选的静态类型系统和基于类的面向对象编程。以下是有关 TypeScript 的一些关键点：

1. 为什么使用 TypeScript？

静态类型检查：TypeScript 提供了一个可选的类型系统。这可以在编译时捕获许多常见的错误，例如尝试访问一个不存在的属性或传递错误类型的参数给函数。
更好的编辑器支持：包括自动完成、智能重命名、类型提示和其他高级重构功能。
更强大的 OOP 特性：TypeScript 提供了类、接口、泛型、模块等特性，使大型应用程序的开发更加组织化和可维护。
更好的协同开发：静态类型检查和工具支持可以帮助大型团队协同开发复杂的项目。

2. TypeScript 与 JavaScript 的区别

TypeScript 包含了所有的 JavaScript 语法，但还添加了类型、接口、装饰器、类等特性。
TypeScript 文件使用 .ts 或 .tsx 扩展名，而 JavaScript 使用 .js 或 .jsx。
TypeScript 需要被编译成 JavaScript，这样浏览器或 Node.js 才能执行它。编译的过程会检查类型错误并将 TypeScript 代码转换为纯 JavaScript。

TypeScript 的使用在许多现代框架和库中变得越来越流行，例如 Angular、React 和 Vue。它为开发者提供了更强大的工具和更严格的代码结构，有助于创建更可靠、可维护的应用程序。

shell 复制代码

Success! Created antd-demo-ts at /Users/xxxx/usr/local/src/web/antd-demo-ts
Inside that directory, you can run several commands:
  yarn start
    Starts the development server.
  yarn build
    Bundles the app into static files for production.
  yarn test
    Starts the test runner.
  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can't go back!
  
We suggest that you begin by typing:
  cd antd-demo-ts
  yarn start
Happy hacking!
✨  Done in 244.23s.

通过下面的命令启动项目：

bash 复制代码

yarn start

访问

bash 复制代码

http://localhost:3000

这样模板项目就创建成功了。

目录结构

使用 yarn create react-app antd-demo-ts --template typescript 命令创建一个新的 React 应用程序时，你将使用 TypeScript 模板初始化项目。这意味着项目的源代码将使用 TypeScript 编写，而不是普通的 JavaScript。

以下是使用上述命令生成的项目的典型目录结构：

csharp 复制代码

antd-demo-ts/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── react-app-env.d.ts
│   ├── setupTests.ts
│   └── logo.svg
├── .gitignore
├── package.json
├── tsconfig.json
├── README.md
└── yarn.lock

目录结构的简要描述：

node_modules/: 存储项目的所有依赖模块。
public/: 公共静态文件和 assets，如 HTML 文件、图像等。
src/ : 这是应用程序的源代码目录。它包含所有的 TypeScript 文件、CSS 和其他资源。
- App.tsx: 主应用程序组件。
- index.tsx: 应用程序的入口点。
- react-app-env.d.ts: 为 React 脚本提供类型声明。
- setupTests.ts: 测试设置和配置。
.gitignore: 列出 git 应忽略的文件和目录。
package.json: 定义项目的元数据和依赖。
tsconfig.json: TypeScript 的配置文件。
README.md: 项目的 README 文件，包含关于项目的基本信息。
yarn.lock: Yarn 使用的锁定文件，确保依赖的一致性。

总结

作为一个App开发者，今天第一次正式的学习前端web开发，把自己的学习心得记录下来与大家一起分享。

这仅仅是基于我自己的学习方式和经历。对于其他人，最有效的学习方法可能会有所不同。

我鼓励每个人都根据自己的情况和学习风格找到最适合自己的学习方法。