Skip to content

yldm-tech/vite-react-ts-tempalte

Repository files navigation

feature

  • vite作为构建工具,复杂度比webpack低,但速度却比webpack快很多
  • 支持hmr,修改代码页面无缝更新
  • 以typescript为开发语言,有类型约束不会写出难以查找的bug
  • 支持别名@到根目录,@@到components目录
  • 支持国际化,默认写了中文、英文、日语3种语言
  • 配置了eslint,使用yarn fix可以自动修复代码格式问题
  • 采用了tailwind作为开发的css样式框架,外加tailwind-classnames约束样式名字。
  • 配置了多环境,默认为local、stg、prod3个环境,如果有特殊需求可根据需要扩展
  • 状态管理采用redux-tool-kit,没有繁琐的redux流程(action、reducer等),一个slice文件就是一个业务模块。
  • 带一个todoList的demo,列举了react-router-dom相关用法

目录结构

├── envs                          多环境配置文件
└── src                           工程核心代码
    ├── assets                    资源文件
    │   ├── i18n                     国际化翻译文件
    │   ├── images                   图片资源
    │   └── styles                   全局样式
    ├── components                 组件
    │   ├── CFooter                  头部
    │   └── Common                 通用组件
    │       ├── CButton
    │       ├── CContainer
    │       ├── CFullLoading
    │       ├── CInput
    │       ├── CLink
    │       ├── CNavLink
    │       └── CPartialLoading
    ├── i18n                         国际化代码实现
    ├── redux                        状态管理(slice和store)
    ├── service                      业务服务(http交互)
    ├── utils                        通用方法
    └── views                        页面
        ├── Add                        添加todo
        ├── Home                       todoList
        ├── Login                      登陆页面
        ├── NotFound                   404
        └── Task                       taskList
├── tsconfig.json                     ts配置
├── vite.config.ts                    vite配置
├── .eslintrc.js                      eslint配置
├── README.md                         项目说明文件
├── index.html                        项目入口文件
├── node_modules                      项目依赖包
├── package.json                      项目依赖声明文件
├── .env                              本地环境(如果没有的话会使用envs/.env.local)
└── yarn.lock                         yarn文件锁

todoList screenshots

launch add list task