react 安装 vite

安装 React 和 React-DOM 包以及使用 Vite 进行 React 开发的步骤如下：

1. 在终端中运行以下命令来创建一个新的 React 项目：

   npx create-react-app my-app

2. 进入项目目录并安装 Vite：

   cd my-app
   npm install vite --save-dev

3. 在项目根目录下创建一个 `vite.config.js` 文件，并添加以下内容：

   module.exports = {
     jsx: 'react',
     plugins: [require('vite-plugin-react')()]
   }

4. 修改 `package.json` 文件中的 `scripts` 部分，将 `start` 命令修改为使用 Vite 启动项目：

   "scripts": {
     "start": "vite",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   }

5. 运行以下命令启动项目：

   npm start

此时，Vite 将会启动一个开发服务器，并在浏览器中打开项目。

相关问题

react+vite

### 使用 React 和 Vite 构建项目的设置与配置指南

对于希望利用现代工具链快速启动新项目开发的开发者来说，Vite 是一种极佳的选择。它提供了更快的冷启动速度以及即时热更新功能。

创建基于 React 的 Vite 项目可以通过如下方式实现：

#### 安装 Vite 并初始化项目结构

通过终端执行以下命令来安装最新版本的 Vite CLI 工具并生成一个新的 React 应用程序模板[^4]:

npm create vite@latest my-react-app --template react
cd my-react-app

这会自动下载必要的依赖项并将项目所需的基础文件夹和文件准备好。

#### 配置 `vite.config.js` 文件

为了更好地支持 React 开发环境，可以在根目录下编辑或新建名为 `vite.config.js` 的配置文件。此文件允许自定义服务器行为、优化构建过程等操作。一个典型的配置可能看起来像这样:

import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';

export default defineConfig({
    plugins: [reactRefresh()],
    server: {
        port: 3000,
        open: true,
    },
});

上述代码片段启用了 React Fast Refresh 插件以增强开发体验，并设置了默认端口号为 3000 同时在启动服务时打开浏览器窗口[^5]。

#### 添加额外的功能插件

如果计划集成其他框架如 Ant Design 或者需要处理 CSS Modules 等特性，则可以根据需求引入相应的 Vite 插件。例如要使用 Ant Design 组件库，除了按照官方文档指引完成样式资源加载外，还可以考虑加入专门针对按需加载设计的支持包[^6]。

#### 运行与发展模式下的应用

最后一步是在本地环境中测试应用程序是否正常工作。只需简单输入下列指令即可开启开发服务器：

npm install
npm run dev

此时应该能够在指定地址访问到正在运行的应用实例了。

react+vite安装sass

要在 React Vite 项目中使用 Sass，您需要安装 `sass` 和 `sass-loader` 依赖项。您可以使用以下命令来安装它们：

npm install sass sass-loader --save-dev

或者，如果您使用的是 Yarn 包管理器，则可以使用以下命令：

yarn add sass sass-loader --dev

安装完成后，您可以在 `vite.config.js` 文件中配置 Sass 支持。以下是一个简单的配置示例：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import sass from 'sass';
import { sassPlugin } from './plugins/sass-plugin';

export default defineConfig({
  plugins: [react(), sassPlugin({ implementation: sass })],
});

其中，`sassPlugin` 是一个自定义插件，用于为 Vite 添加 Sass 支持。以下是 `sassPlugin` 的示例代码：

import { Plugin } from 'vite';
import sass from 'sass';

export function sassPlugin(options = {}): Plugin {
  return {
    name: 'sass',
    transform(code, id) {
      if (id.endsWith('.scss') || id.endsWith('.sass')) {
        const { css } = sass.renderSync({ ...options, data: code });
        return {
          code: `export default ${JSON.stringify(css.toString())}`,
          map: null,
        };
      }
    },
  };
}

完成配置后，您可以在 React 组件中导入 Sass 文件并使用它们。例如：

import React from 'react';
import './styles.scss';

function App() {
  return <div className="container">Hello, Sass!</div>;
}

export default App;