@epig/create-admin-app
create a admin app
Last updated a year ago by infeng .
ISC · Original npm · Tarball · package.json
$ cnpm install @epig/create-admin-app 
SYNC missed versions from official npm registry.

管理后台脚手架

使用说明

npx epig-create-admin-app my-app
cd my-app
npm start

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

Then open http://localhost:8000 to see your app. When you’re ready to deploy to production, create a minified bundle with npm run build.

管理后台项目结构说明

├── Dockerfile  docker镜像构建文件
├── README.md
├── docker-compose.yml  docker-compose配置示例
├── pm2.json  生产环境pm2配置
├── proxy.config.js  开发环境api代理配置
├── public
│   └── index.html
├── server  生成环境前端代理服务
│   ├── package.json
│   └── server.js
├── src  源代码
│   ├── app.less  公共样式
│   ├── components  组件库
│   ├── containers  容器(渲染层)
│   │   └── package.json
│   ├── custom.d.ts  自定义typescript定义文件
│   ├── entry.config.ts  入口配置
│   ├── models  model(存放全局的model)
│   │   ├── index.tsx
│   │   └── package.json
│   └── util  工具库
│       └── package.json
├── .epigrc.js  @epig/af-build-dev配置
├── .webpackrc.js  webpack配置
├── tsconfig.json  typescript配置
└── tslint.json  tslint配置

管理后台项目开发说明

主要开发集中在 containersmodels 里面,通常一个页面由一个容器和一个model组成。model 采用自动注册的方式注入到容器,查看使用说明

渲染层(containers)

containers 下的文件结构要跟路由一致

路由:

/system/users

容器目录:

└── containers
    └── System
        └── Users
            ├── EditUser /system/user的子页面
            │   ├── index.tsx
            │   └── models.ts
            ├── index.tsx
            └── model.ts

/System/Users/index.tsx 示例:


import * as React from 'react';
import BasicComponent from '@epig/admin-tools/lib/components/BasicComponent';
import model, { UserState } from 'models/system/users';

export interface UserProps {
  users: UserState;
  usersActions: typeof model.actions;
}

class User extends BasicComponent<UserProps, any> {
  render() {
    return (
      <div>
        User
      </div>
    );
  }
}

数据层(models)

model 是action、saga和reducer的集合,使用 @epig/admin-tools 提供的工具快速创建。

npx epig-admin-tools model /system/users/model -- --modelName users

users model 示例:


import { createModel } from '@epig/admin-tools-lib/model';

export interface UsersState {
  loading: boolean;
}

const model = createModel({
  modelName: 'users',
  action: {
    simple: {},
    api: {
      users: {
        path: '/system/users',
      },
    },
  },
  reducer: ({ apiActionNames, createReducer }) => {
    return createReducer<UsersState, any>({
      [apiActionNames.users.request](state, action) {
        return {
          ...state,
          loading: true,
        };
      },
      [apiActionNames.users.success](state, action) {
        return {
          ...state,
          loading: false,
        };
      },
      [apiActionNames.users.error](state, action) {
        return {
          ...state,
          loading: false,
        };
      },
    }, {
      loading: false,
    });
  },
  sagas: () => {
    return [];
  },
});

export default model;

辅助工具

Current Tags

  • 1.0.2                                ...           latest (a year ago)

3 Versions

  • 1.0.2                                ...           a year ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
Downloads
Today 0
This Week 0
This Month 3
Last Day 0
Last Week 3
Last Month 0
Dependencies (6)
Dev Dependencies (9)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |