**React + TypeScript + Vite：打造一个标准化的项目框架**

前言

大家好，今天我来给大家搭建一个 React + TypeScript + Vite 的标准化框架。在日常开发中，我们大多数时间都在维护老项目，但偶尔也会需要自己搭建框架。当我们需要为团队搭建一个 React 项目时，我觉得参考一个标准化的框架会是一个不错的选择。

工具选择

在搭建项目框架之前，我们需要先选择合适的工具。以下是我推荐的工具：

• React：一个用于构建用户界面的 JavaScript 库。
• TypeScript：一种对 JavaScript 的超集，可以帮助我们编写更健壮的代码。
• Vite：一个现代化的构建工具，可以帮助我们快速构建和开发 React 项目。

项目结构

接下来，我们来搭建项目的结构。创建一个名为 my-react-project 的文件夹，并在其中创建以下子文件夹：

• src：用于存放源代码。
• node_modules：用于存放依赖包。
• public：用于存放静态资源，如 HTML、CSS 和图像。

包安装

现在，我们可以安装必要的包了。在命令行中，进入 my-react-project 文件夹，然后运行以下命令：

npm install create-react-app

这将安装 create-react-app 包，这是一个用于创建 React 项目的脚手架工具。

项目配置

安装完成后，我们可以运行以下命令来创建项目：

create-react-app my-react-app --template @typescript/template

这将创建一个新的 React 项目，并使用 TypeScript 作为模板。

添加 Vite

为了使用 Vite，我们需要在项目中安装它。在命令行中，进入 my-react-app 文件夹，然后运行以下命令：

npm install vite --save-dev

安装完成后，我们需要在项目的 package.json 文件中添加以下配置：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "typescript": "^4.4.4"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.10.2",
    "@typescript-eslint/parser": "^5.10.2",
    "eslint": "^8.10.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "stylelint": "^14.7.1",
    "stylelint-config-standard": "^25.0.0",
    "stylelint-webpack-plugin": "^4.0.1",
    "vite": "^3.2.4",
    "vite-plugin-react": "^1.2.4"
  }
}

实现一个简单的 React 应用程序

现在，我们可以实现一个简单的 React 应用程序了。在 src 文件夹中，创建一个名为 App.tsx 的文件，并添加以下代码：

import React from "react";

const App = () => {
  return <h1>Hello, World!</h1>;
};

export default App;

在 index.js 文件中，添加以下代码：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

现在，我们可以运行以下命令来启动项目：

npm run dev

这将启动 Vite 开发服务器，并打开浏览器。你会看到一个显示 "Hello, World!" 的页面。

结语

以上就是如何搭建一个 React + TypeScript + Vite 标准化框架的教程。我希望这篇文章对你有帮助！