Naturally Pacifist Marsupials

    @beisen/talent-ui-bootstrap

    1.0.15 • Public • Published

    Talent-ui-bootstrap 用来启动Talent UI 程序的核心代码

    ## 他包括了原来TalentCore中 启动程序的大部分逻辑,但对流程做了一些简化。

    ## 应用, 你的项目应该有如下结构

       -- project
           -- src
               --> entry.js
               -- pages //你的页面,和容器组件,同时也是代码拆分的依据
               -- component //所有的展现组件
                   --> app.js
                   --> header.js
                   --> sidebar.js
                   --> footer.js
               -- reducers
                   //建议和你的页面结构对应
               -- app-config.js
    
    
        //你在entry.js中
        import React, { Component } from "react";
        import Header from "components/common/header";
        import Footer from "components/common/footer";
        import Sidebar from "components/common/sidebar";
        import mainStyle from './styles.scss';
     
        /**
        * 必需!!
        * 应用组件
        * 如果项目中使用了页面对代码进行拆分,需要把页面的代码通过this.props.children来访问页面组件
        * 在talent-ui-2.0中如果使用了talent-ui-bootstrap作为项目的entry, 只需要export组件就可以了
        */
        export default class App extends Component {
            render() {
                return (
                    <div>
                        <Header />
                        <div className="content-wrapper">
                            {this.props.children}
                        </div>
                        <Footer />
                    </div>
                );
            }
        }
     
        ....
     
        // app-config.js 这个是必须要存在的文件, 基本上是用来配置单向数据流的,当然如果需要其他的扩展点,也会通过这个文件来实现,比如el
        import reduxThunk from "redux-thunk";
        import logger from "redux-logger";
     
        //应用配置文件,这个文件是必须存在的,但是配置可以为空,可以对项目运行时进行一些配置,比如,配置应用的初始state, redux中间件
        /**
        * 导出对象 应用配置,作为业务的扩展点
        *  @middlewares:包含middlewares,
        *  @afterCreateStore:创建完成store之后的回调,比如使用Redux-saga就需要在创建完store之后运行Saga
        *  @initialState: 应用程序的初始状态,一般没什么用,万一有用呢。
        *  @el: 如果是字符串,就是指定dom的ID, 也可以传dom对象, 默认是bsMain
        *  @...:   如果有什么需求可以提给liguoming@beisen.com,
        */
        const config = {
            middlewares: [reduxThunk],
            afterCreateStore: function(store) {},
            initialState: {},
            el: 'bsMain'
        };
        export default config;
     

    你不需要对路由,redux相关的东西做什么配置,就可以启动程序啦,当然,你还需要talent-ui-webpackConfig 来帮你生成webpack配置来应用本地的开发环境。

    关于Page和Container

    Page 对于单页面应用来说,当我们切换地址的时候,页面并没有刷新,除了所有页面都会显示的公共部分之外(布局组件-Layout), 变化的地方是浏览器地址变化所对应的一个组件,这个组件可以被叫作页面组件,页面组件作为Layout的组件的子组件,来响应浏览器地址的变化。

    container, 在react-redux的网站上也做了说明,但是你需要明白,Container和Page有相关的地方,页面都是Container组件,但不是唯一的Container组件,你可以在需要的时候添加新的container组件,container组件 也可以包含其他的container组件。你可以看一下这个讲解

    更新说明

    2月21号

    为了不让大家产生误解详情请看上面的关于Page和Container,我们把页面目录由Containers改成了Pages

    取消使用index.js来代表页面的规则,因为这个规则和应用查找模块的规则有重合的地方,也就是index.js代表一个目录地址指向的模块,当有目录嵌套的时候我们便会产生混淆。这应该是页面还是模块。

    使用page-view.js来表示目录下的页面组件。

    支持子路由和代码拆分, 我们可以使用#/home/user这样的路由来访问pages/home/user/page-view.js所代表的页面。每一个页面都是一个code splitting的点,都会被打包成一个单独的chunk。你可以查看我们的示例项目

    Keywords

    none

    Install

    npm i @beisen/talent-ui-bootstrap

    DownloadsWeekly Downloads

    11

    Version

    1.0.15

    License

    MIT

    Last publish

    Collaborators

    • beisencorp