使用vite搭建react项目

1. 使用nvm管理node版本， 切换到最新的node版本

2. 使用命令

// demo-react-app 是文件名
npm create vite@latest demo-react-app

3.选择React

4. 选择TypeScript, SWC是比Bable编译更快

5.选择完成 ，跟着命令安装运行即可。

6. npm install命令安装过慢，改使用cnpm install安装，然后运行命令npm run dev

7. 安装组件库

https://ant-design.antgroup.com/docs/react/use-with-vite-cn

npm install antd --save
如果不行就
cnpm install antd --save

 

8. 安装css库，windcss库

https://cn.windicss.org/integrations/vite.html

npm i -D vite-plugin-windicss windicss
或者
cnpm i -D vite-plugin-windicss windicss

安装成功在vite.config.js配置文件中添加插件：

import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS(),
  ],
}

最后在main.tsx入口文件中写入

import 'virtual:windi.css'

测试是否正常使用windicss

9. 集成路由并配置

npm install react-router-dom -S

10. 把多余的css文件删除， 新建几个文件夹，跟vue项目差不多

在views文件中新建index.tsx

src/view/index.tsx

function Index() {
    return (
        <>
          <h1>我使用了vite+react</h1>  
        </>
    )
}

export default Index;

router文件夹新建路由文件router.tsx

import { Route, Routes } from "react-router-dom";
import Index from "../views/index";

function Router() {
    return (
        <Routes>
            <Route path="/" element={<Index />} />
        </Routes>
    )
}

export default Router;

App.tsx文件改成如下

import { BrowserRouter } from 'react-router-dom'
import Router from './router/router'
function App() {

  return (
    <BrowserRouter>
      <Router />
    </BrowserRouter>
  )
}

export default App

运行后：

11. 使用‘@‘作为src根目录的方法

npm install --save-dev @types/node

然后在vite.config.ts配置文件写入

import path from 'path'

export default defineConfig({
    resolver: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
        },
    },
    ...
})

尝试修改路由的路径

向tsconfig.app.json 和 tsconfig.node.json文件 增加以下代码应该解决报红线问题

    "types": ["node"],
    "paths": {
      "@/*": ["./src/*"]
    }

 后面还会增加状态管理，国际化...