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安装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;

创建react+vite项目命令

可以使用以下命令来创建一个基于 React 和 Vite 的项目：

1. 首先确保已经安装了 Node.js 和 npm。

2. 在命令行中输入以下命令来全局安装 Vite：

   npm install -g vite

3. 创建一个新的空文件夹，并在其中打开命令行。

4. 在命令行中输入以下命令来初始化一个新的 React 项目：

   npm init react-app my-app

其中，`my-app` 是项目的名称，可以根据需要进行更改。

5. 进入刚刚创建的项目文件夹：

   cd my-app

6. 启动项目：

   npm start

这将启动开发服务器，您可以在浏览器中访问 http://localhost:3000 来查看应用程序。

注意：在使用 Vite 时，您不需要进行任何配置或编译步骤，因为 Vite 可以直接运行您的源代码。如果需要在生产环境中构建项目，则可以使用 `npm run build` 命令。