美文网首页
使用React、antd、ts从零搭建框架--项目说明

使用React、antd、ts从零搭建框架--项目说明

作者: 被偷的贼 | 来源:发表于2021-11-10 16:20 被阅读0次

    背景

    现在公司的主要技术栈是React,所以也想着能够搭建一个好的React前端框架,方便在工作中使用。主要用到的库。

    • React、TypeScript
    • React-Router、Redux
    • Antd、Less
    • Axios、Mockjs、http-proxy-middleware
    • Webpack、Babel、Eslint、Prettier

    功能

    • 登录 注销 演示页面
    • 全局功能
      动态侧边栏
      多页面切换
    • Redux状态管理
    • Mocker 数据
    • webpack 打包优化 antd按需加载
    • hooks

    项目效果

    登录 主菜单

    项目结构说明

    ├── README.md
    ├── craco.config.js
    ├── mocker
    ├── package-lock.json
    ├── package.json            # package.json
    ├── public                  # 静态资源
    ├── src
    │   ├── assets              #静态资源
    │   │   ├── images          #图片
    │   │   └── style           #全局样式
    │   ├── component
    │   ├── config              #全局配置
    │   │   ├── index.ts
    │   │   ├── menu.ts
    │   │   └── routes.ts
    │   ├── index.tsx           #入口文件
    │   ├── logo.svg
    │   ├── pages               #页面
    │   │   ├── 404             #404页面
    │   │   ├── frame           #框架页面
    │   │   │   ├── appRouter.tsx
    │   │   ├── home
    │   │   ├── login           #登录页面
    │   ├── services            #接口
    │   ├── store               #全局stores
    │   │   ├── index.ts
    │   │   └── types.ts
    │   └── utils               #工具类
    ├── tsconfig.json
    └── yarn.lock
    

    目录

    引言
    第一章:项目创建、antd、less
    第二章:路由拦截、路由嵌套
    第三章:状态管理 Redux
    第四章:网络请求、代理、mockjs
    第五章:webpack配置
    第六章:Eslint

    源码地址

    https://github.com/dxn920128/cms-base

    相关文章

      网友评论

          本文标题:使用React、antd、ts从零搭建框架--项目说明

          本文链接:https://www.haomeiwen.com/subject/wesyzltx.html