01_react+vite+ts从0搭建后台管理系统模板

前言

这个项目是我闲来无事的时候搭建的，因为平常开发都是使用的umi的生态圈，例如Ant Design Pro等，正好之前在学习vue3的时候接触到了vite 想着为什么不用vite搭建一套自己的模板，以后如果用到的话也方便。

其实这个项目也搭建了很久了，一直没有时间去完善，最近又想起了它，索性就把它完善整理一下，记录成文档的方式，让大家参考一下。同时也可以指正一下其中的问题。

不过在第一篇文章中不会搞太多东西，只是介绍和安装一些必要的库。因为毕竟项目很久没有做过了。有很多内容都想不起来了，慢慢来吧...

目标

搭建一套react后台管理系统模板，集成一些检查工具和vscode的配置，同时结合自己开发的一个脚手架工具逐步将自己的知识点串起来。我也将自己的github项目链接发出来，有兴趣的可以看看，欢迎指正。

react-vite-template

开始

先说使用到的工具

• vite
• react

这两个就不用过多介绍了，vite玩vue的都应该知道，而 react 这可以说是前端元老了，尤其是react hooks出来以后。只能用一句话来形容。火的冒泡！！！

构建项目

1. npm create vite@latest react-vite-template -- --template react-ts
2. cd react-vite-template
3. npm install
4. npm run dev

当在终端运行 npm run dev之后你就可以看到下面这张图，此时说明你的项目已经构建成功，然后我们就可以做接下来的事情了。

注意：vite现在已经是5.x的版本和4.x是有部分差异的具体的可以查看官网，因为要整理文档的原因，我的项目就暂时不去升级，后面有时间再去调整。

从V4迁移

基础内容配置

配置@符 （vite-config.ts）

//配置@路劲 vite.config.ts
npm install --save @types/node

import path from "path"
resolve:{
    alias:{
      "@":path.resolve(__dirname,'./src')
    }
  }

配置@符提示

 //配置@路径提示 tsconfig.json --> compilerOptions
 "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }

样式 less

npm install less
// 在文件命名上使用*.module.less的形式启用css的module用法，具体的内容可以看下面的链接

import styles from './index.module.less'
<div className={styles.box}></div>	

路由

npm install react-rouer-dom

react-router-dom官网

状态管理库(redux,react-redux,@reduxjs/toolkit)

npm install redux react-redux @reduxjs/toolkit

redux中文官网

总结

这篇文章呢只是先把环境搭建起来，篇幅不会太长，毕竟这样的基础教程看着官网的文档就能做下来。我也是按照自己的结构来做的，各位勿怪嘿嘿。下一篇文章会把如何添加eslint、prettier等一些检查类的工具总结出来。希望和各位大佬多多交流。人外有人，天外有天。各位江湖再见！！！