从0到1使用vite搭建react项目保姆级教程

npm create vite@latest my-vite-app 

npm create vite@latest my-vite-app 
# 选择默认模板 'create-react-app'
# 输入项目名称，例如 'my-react-app'
# 选择一个JavaScript框架，或者TypeScript

cd my-react-app
npm install 安装package.json中的依赖包
npm run dev

vite [root]：启动开发服务器，可以指定一个根目录（可选）。
build [root]：构建生产环境的应用程序，可以指定一个根目录（可选）。
optimize [root]：预打包依赖项，用于优化构建性能。
preview [root]：本地预览生产环境的构建结果，可以指定一个根目录（可选）。
--open：启动开发服务器后自动打开默认浏览器并访问应用程序
--cors：启用 CORS（跨域资源共享）。
--strictPort：如果指定的端口已被占用，则退出。
--force：强制优化器忽略缓存并重新打包。
-c, --config <file>：使用指定的配置文件。
--base <path>：设置公共基础路径，默认为 /。
-l, --logLevel <level>：设置日志级别，可选值为 info、warn、error、silent。
--clearScreen：允许或禁用日志时的清屏操作。
-d, --debug [feat]：显示调试日志，可选参数为特定功能的名称。
-f, --filter <filter>：过滤调试日志的输出。
-m, --mode <mode>：设置环境模式。
-h, --help：显示帮助信息。
-v, --version：显示版本号。

import { Uploader,Toast  } from 'react-vant';

npm install less -D

npm install less-loader -D

import './App.css'
import * as React from 'react'
import RootRouter from "./router.jsx"
import {BrowserRouter} from 'react-router-dom' 
function App() {
  return (
    <BrowserRouter>
      <RootRouter/>
    </BrowserRouter>
  )
}
export default App

import * as React from 'react'
import {Routes,Route} from 'react-router-dom'
import Home from "./pages/index"
import User from './pages/user'
import Created from './pages/Created'
import Complete from './pages/Complete'

function Router() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/user" element={<User />} />
      <Route path="/created" element={<Created />} />
      <Route path="/complete" element={<Complete />} />
      </Routes>
  );
}

export default Router;

import * as React from 'react'
import {useState} from 'react'

function UserPage() {
  const navigateTo  = useNavigate();
  const [account, setAccount] = useState('some-account-value');  
  const [columns, setColumns] = useState([/* ...初始的列数据... */]); 

    return (

        <div></div>
            
        )

}

"jsx": "react",

npm i vite-plugin-commonjs

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [commonjs(),react()],
  build: {
	  commonjsOptions: {
	    transformMixedEsModules: true
	  }
  }
})