Vite2实战：React+TS+Mobx项目开发入门指南

Vite2 是一个高度优化且功能强大的前端构建工具，它使用 ESBuild 代替了传统的 Webpack，这使得它能够更快地构建和热重载应用程序。同时，Vite2 还支持 TypeScript 和 JSX，因此您可以轻松地使用这些语言来构建您的应用程序。

而 React 是一个用于构建用户界面的 JavaScript 库，它允许您创建交互式和动态的 Web 应用程序。

TypeScript 是一种静态类型语言，它可以帮助您捕获开发中的错误，并确保您的代码更加健壮和可维护。

Mobx 是一种状态管理库，它可以帮助您管理应用程序的状态，并使您的应用程序更加可预测和易于维护。

在这篇指南中，我们将详细介绍如何使用 Vite2 + React + TS + Mobx 构建一个现代化的 SPA，并提供一些有用的技巧和建议，帮助您快速上手。

准备工作

在开始构建应用程序之前，您需要安装一些必要的工具和依赖项。

• 安装 Node.js 和 npm：如果您还没有安装 Node.js 和 npm，请先安装它们。您可以从 Node.js 官网下载安装包，也可以使用 nvm 或 n 等工具来安装。
• 安装 Vite：您可以使用 npm 来安装 Vite。在命令行中输入以下命令：

npm install -g vite

• 创建项目：创建一个新的项目文件夹，然后使用 Vite 的命令行工具来创建项目。在命令行中输入以下命令：

mkdir my-app
cd my-app
vite init

构建应用程序

1. 创建 React 应用

npx create-react-app my-app --template @vitejs/app
cd my-app

2. 安装 TypeScript

npm install --save-dev typescript

3. 创建 TypeScript 配置文件

npx tsc --init

4. 将 JavaScript 文件重命名为 TypeScript 文件

mv src/App.js src/App.tsx

5. 将 index.html 文件中的 JavaScript 引用更改为 TypeScript 引用

<script type="module" src="./src/main.tsx"></script>

6. 在 src/main.tsx 文件中，将 App 组件类型更改为 TypeScript 类型

import * as React from 'react';

function App() {
  return (
    <div>
      <h1>Hello Vite!</h1>
    </div>
  );
}

export default App;

7. 运行应用程序

npm run dev

应用程序将在 http://localhost:3000 上运行。

添加 Mobx

npm install --save mobx mobx-react

在 src/App.tsx 文件中，导入 Mobx 并创建一个 observable 状态

import { observable } from 'mobx';

class AppState {
  @observable count = 0;
}

const appState = new AppState();

在 App 组件中，使用 Mobx 观察者来渲染状态

import { observer } from 'mobx-react';

const App = observer(() => {
  return (
    <div>
      <h1>Count: {appState.count}</h1>
      <button onClick={() => appState.count++}>+</button>
    </div>
  );
});

运行应用程序，您将在浏览器中看到一个计数器，您可以点击按钮来增加计数。

结语

在本指南中，我们详细介绍了如何使用 Vite2 + React + TS + Mobx 构建一个现代化的 SPA。通过使用这些技术，您可以快速地构建和热重载应用程序，并确保您的应用程序更加健壮和可维护。希望这篇指南能够帮助您快速上手并构建出更好的应用程序。