React通用后台模板

一. 项目初始化

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 />  </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": {      "@/*": [           "src/*"      ]    }
},

6. scss模块化

src下新建components文件夹,components文件夹下新建Comp1文件夹，新建index.tsx和comp1.scss

import "./comp1.scss"
function Comp() { return (   <div className="box">       <p>这是Comp1里面的组件</p>   </div>)
}
export default Comp

src/components/Comp1/comp1.scss中：

.box{   color:red
}

components文件夹下新建Comp2文件夹，新建index.tsx:

// ！！！注意，在Comp2组件中不引入上面的comp1.scss样式
function Comp() { return (   <div className="box">       <p>这是Comp2里面的组件</p>   </div>)
}
export default Comp

在App.tsx中使用这两个组件：

import { useState } from 'react'
import Comp1 from "./components/Comp1"
impo