【Windows 11 开发实例教程】

在 Windows 11 上进行开发涉及多个方面，包括配置开发环境、安装开发工具、以及使用常见的编程语言和框架等。

1. Windows 11 开发环境准备

1.1 安装和配置开发工具

Windows 11 提供了一个强大的开发环境，支持各种开发工具和平台。以下是一些常见的开发工具的安装和配置。

1.1.1 安装 Visual Studio Code（VSCode）

VSCode 是一个轻量级的、功能强大的代码编辑器，支持多种编程语言和扩展，广泛用于开发。

• 下载 VSCode：Visual Studio Code 官网
• 安装过程中选择 Add to PATH（将 VSCode 添加到系统 PATH），以便在命令行中直接使用 code 命令启动编辑器。

1.1.2 安装 Git

Git 是一个分布式版本控制工具，用于管理项目的版本和协作开发。

• 下载 Git：Git 官网
• 在安装过程中，确保选择 Git from the command line 选项。

安装完成后，打开终端并检查版本：

git --version

1.1.3 安装 Node.js 和 npm

Node.js 是一个基于 JavaScript 的运行时，广泛用于前端和后端开发。npm（Node Package Manager）用于管理 JavaScript 项目的依赖包。

• 下载 Node.js：Node.js 官网
• 安装完成后，检查版本：

node --version
npm --version

1.1.4 安装 Python（可选）

如果你开发的项目需要 Python，可以从官网安装：

• 下载 Python：Python 官网
• 安装过程中勾选 Add Python to PATH。

检查版本：

python --version

1.1.5 安装 JDK（Java 开发工具包）

如果你需要开发 Java 应用，安装 JDK 是必要的。

• 下载 JDK：Oracle JDK 官网
• 安装后，配置环境变量（如 JAVA_HOME 和 PATH），确保可以从命令行使用 Java。

检查版本：

java -version

1.1.6 安装 Docker（可选）

Docker 是一个流行的容器化平台，用于部署、管理和开发容器化应用。

• 下载 Docker：Docker 官网
• 安装 Docker Desktop 后，可以通过 Docker 命令行和 GUI 管理容器。

检查版本：

docker --version

1.2 Windows 11 开发者工具与设置

1.2.1 启用开发者模式

Windows 11 提供了开发者模式，可以让开发者更轻松地进行应用开发和调试。

1. 打开 设置，点击 隐私与安全，选择 开发者选项。
2. 启用 开发者模式，并安装任何提示的开发者工具（如 Windows Subsystem for Linux 等）。

1.2.2 使用 Windows Subsystem for Linux (WSL)

WSL 允许你在 Windows 上运行 Linux 发行版，从而使你能够使用许多 Linux 工具和命令行工具。

1. 安装 WSL：
   打开 PowerShell 作为管理员，输入以下命令安装 WSL：

   wsl --install
   

2. 选择 Linux 发行版：安装完成后，你可以选择从 Microsoft Store 中安装你喜欢的 Linux 发行版（如 Ubuntu）。

3. 启用 WSL 2（推荐）：WSL 2 提供了比 WSL 1 更强大的性能和兼容性。确保使用 WSL 2：

   wsl --set-default-version 2
   

1.3 常见开发语言与框架

根据你选择的开发语言和框架，可能需要不同的开发环境配置。以下是一些常见的编程语言和框架的设置步骤。

1.3.1 Web 开发（Node.js + React）

• Node.js 环境：前面已经安装了 Node.js 和 npm。
• React.js：React 是一个流行的 JavaScript 库，用于构建用户界面。你可以使用 create-react-app 创建一个 React 项目。

npx create-react-app my-app
cd my-app
npm start

1.3.2 Java 开发（Spring Boot）

• 安装 JDK：如果你已安装 JDK，可以直接使用。
• 安装 Spring Boot：Spring Boot 是 Java 的流行框架，用于构建现代 Web 应用和微服务。

使用 Spring Initializr 创建一个 Spring Boot 项目：

• 访问 Spring Initializr。
• 选择合适的设置，如项目类型、依赖项（如 Web、JPA 等）。
• 下载并解压项目，使用 IDE（如 IntelliJ IDEA）打开并运行项目。

1.3.3 Python 开发（Django 或 Flask）

• 安装 Python：如果你已经安装了 Python，可以开始使用。
• 安装 Django：

pip install django
django-admin startproject myproject
cd myproject
python manage.py runserver

• 安装 Flask：

pip install flask

然后编写简单的 Flask 应用：

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello():
    return "Hello, World!"

if __name__ == '__main__':
    app.run(debug=True)

1.3.4 C# 和 .NET 开发

• 安装 .NET SDK：.NET 官网
• 使用 .NET CLI 创建一个控制台应用程序：

dotnet new console -n MyApp
cd MyApp
dotnet run

2. 开发实例：创建一个 React Web 应用

我们将通过一个简单的实例，使用 React.js 在 Windows 11 上创建一个基本的 Web 应用。

2.1 创建项目

1. 在命令行中使用 npx 命令创建 React 应用：

npx create-react-app my-react-app

2. 进入项目目录：

cd my-react-app

3. 启动开发服务器：

npm start

2.2 修改项目

打开 src/App.js 文件并修改内容，使其显示一个简单的欢迎信息：

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to My React App</h1>
      </header>
    </div>
  );
}

export default App;

保存文件并刷新浏览器，你会看到 Welcome to My React App 显示在页面上。

2.3 添加交互

在 App.js 中添加一个按钮和一个事件处理程序，来展示如何在 React 中处理交互：

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);

  const incrementCount = () => setCount(count + 1);

  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to My React App</h1>
        <button onClick={incrementCount}>Click Me</button>
        <p>Button clicked {count} times</p>
      </header>
    </div>
  );
}

export default App;

2.4 查看效果

保存更改并查看浏览器中的效果，每次点击按钮时，页面上的计数器将增加。