一. 项目初始化

1. 创建项目

环境

npm init vite

打开package.json，参考以下各模块版本：

"dependencies": {    "react": "^18.2.0",    "react-dom": "^18.2.0",    "react-redux": "^7.2.8",    "react-router-dom": "^6.3.0",    "redux": "^4.1.2"
},

下载后进入到项目文件夹，安装package.json中的包：

npm i

尝试更改package.json启动命令：

"scripts": {    "dev": "vite --host --port 3002",    "build": "tsc && vite build",    "preview": "vite preview"
}

2. 项目目录初始化

删除掉官方自带而对我们暂时帮助不大的文件。删除src下除了main.tsx和App.tsx的其他文件；主文件/src/main.tsx修改成：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
ReactDOM.createRoot(document.getElementById('root')!).render(  <React.StrictMode>    <App />  </React.StrictMode>
)

App.tsx文件修改成：

import { useState } from 'react'
function App() {  
const [count, setCount] = useState(0)  return (    <div className="App"> 顶级组件    </div>  )
}export default App

3. 样式初始化

reset-css比Normalize.css更直接，干净利落去除默认样式，更适合在企业里的场景，所以用reset-css，而不用Normalize.css】

npm i reset-css

在src/main.tsx中引入reset-css：

import React from 'react'
import ReactDOM from 'react-dom/client'
import "reset-css"
import App from './App'ReactDOM.createRoot(document.getElementById('root')!).render(  <React.StrictMode>    <App />