Skip to content

Latest commit

 

History

History
94 lines (68 loc) · 2.59 KB

README.md

File metadata and controls

94 lines (68 loc) · 2.59 KB
Raw

React-3G —— 基于React开发的基本组件库

开发文档

项目目录结构

    React-3G
        build
        lib
            components
                ...
            styles
            index.js
  • build：存储 lib 中编写好编译之后输出的代码
  • lib：存储项目的原始源代码 components：组件库的组件代码 styles：公用的样式文件，每个组件对应的样式，写到 components 下各个组件对应的文件夹 index.js：最终对外暴露的组件导出接口，不理解的，去看 export 什么意思。

本地开发NPM摘要

开发前必须弄清楚以下再进行

  • 本地开发NPM包

了解package.json文件各个字段的意义，重点版本号、Scripts

  • 项目本地运行 当前是webpack编译，稍后会添加webpack 编译 watch
    git clone git@github.com:ZJH9Rondo/React-3G.git

    cd React-3G

    npm install

    npm run build

这里还需要开启一个后台，这个后台是用于在本地测试NPM包的实际效果

    git clone git@github.com:alanbsmith/component-lib-playground.git

    cd component-lib-playground

    npm install

    npm run dev

重点

到这一步，你只是配置好了项目，本地测试关键的一点，需要给NPM包导出一条软链接到测试平台，也就是 clone 下来的 component-lib-playground

    cd component-lib-palyground

    // 请保证你当前所在的目录是 component-lib-playground
    npm i * // 这里 * 代表的就是你 clone 下来的 NPM 包所在的根目录

例子：

    test // 根目录
        npm
            lib
            index.js
        component-lib-playground
            src
            ... 

    这个时候 * 应该是 /user/zhongjiahao/.../test/npm/ ,也就是你设备上的绝对路径

关于软链接的设置不懂的看这里

  • 可使用npm link命令npm link

  • 弄清楚组件怎么划分，react 怎么利用组件化的，不难，动起手来。

  • 弄清楚 export import 以及常见的ES6知识

开发事项

组件可按需引用 需引用build目录下的css文件

组件

组件信息见Introduction.md

Class命名规则

  • mb- 开头
  • mb-[标签名]-[对应样式],如mb-btn-large
  • 可添加默认相同属性,如所有按钮样式都有mb-btn这个className