一. 项目初始化
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 App3. 样式初始化
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 />
</React.StrictMode>
)4. scss的安装和初步使用
安装sass vite中很方便，loader这些都不用自己配置，只需要安装好即可使用npm i --save-dev sass
src下新建assets/styles/global.scss：
$color:#eee;
body{
// 禁止选中文字
user-select:none;
background-color: $color;
}
img{
// 禁止拖动图片
-webkit-user-drag:none;
}main.tsx中引入全局样式
import React from 'react'
import ReactDOM from 'react-dom/client'
import "reset-css"
import "./assets/styles/global.scss"
import App from './App'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>
)5. 配置项目路径别名
// https://vitejs.dev/config/
import path from 'path'
export default defineConfig({
plugins: [react()],
resolve:{
alias:{
"@":path.resolve(__dirname,'./src')
}
}
})这时候引入的会path模块报红，但其实我们已经有node，所以就已经有path模块，只是缺少ts的一些声明配置。所以需要安装关于node这个库的ts声明配置
npm i -D @types/node安装成功就没有报红了,如果import后面的path报红，就把引入换成 import * as path from'path';
配置路径别名的提示
虽然现在路径别名已经有了，但是在文件中输入@是没有提示路径的需要我们在tsconfig.json中：添加两项配置
"compilerOptions": {
...
"baseUrl": "./",
"paths": {
"
