Code Monkey home page Code Monkey logo

meisha-template-react's Introduction

前言

这是一个由 umi + typescript 写的一个登录注册的 demo,写好了一些基本的配置和公共方法,新项目可以用它来做模板(直接拉下来在上面改~),或者 react 初学者可以用来做入门的参考~

技术栈

  • - umi(可插拔的企业级 react 应用框架架)
    • - roadhog(是一个包含 dev、build 和 test 的命令行工具,他基于 react-dev-utils,和 create-react-app 的体验保持一致。你可以想象他为可配置版的 create-react-app)
    • - dva(基于 redux、redux-saga 和 react-router 的轻量级前端框架)
  • - typescript
  • - react

umi 官网 https://umijs.org/zh/

dva 官网 https://dvajs.com/

项目结构

  • - config 开发/打包配置
    • - config.ts umi的配置,主要是打包/webpack相关的,具体参考官网
    • - routes.config.ts 路由
  • - mock mock接口的配置
  • - src
    • - config 项目配置
    • - layouts 全局布局
  • - 其他的参考 umi 官网的目录约定

react 小组的内部讨论

类型声明文件

部分npm包自带,部分需要手动安装,部分没有。对于没有声明文件的npm包,可以在 typing.d.ts 中声明,让其不会报错

进入时校验登录状态

  • app.jsrender 中做校验,校验完才开始渲染页面,刷新时当前页可能依赖用户信息

权限路由(待研究)

路由、全局守卫(待研究)

styledcomponent(一个写样式的东西)

umi 的 dav 是否暴露TS接口(待研究)

放出webpack配置

"inspect": "umi inspect --production > output.js",

meisha-template-react's People

Watchers

James Cloos avatar RegExp avatar yuhang avatar 异铭 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.