node package manager
Loosely couple your services. Use Orgs to version and reuse your code. Create a free org »

lcgc-ui

一、说明

整理目前前端拥有的一些前端组件,方便开发复用,以及快速知道有哪些组件,具体效果如何。

二、安装

npm install lcgc-ui --save

三、使用

LCGC UI 抛弃传统的资源加载方式,基于 webpack 打包,资源种类多种多样,会涉及一些 webpack 的配置,如下:

{
  module: {
    loaders: [{
      test: /\\.(eot|woff|woff2|ttf|svg|png|jpg)(\\?v=[\\d\\.]+)?$/,
      loader: 'file?name=files/[hash].[ext]'
    }, {
      test: /\\.css$/,
      loader: 'style!css'
    }]
  },
  resolve: {
    alias: {
      bfd: 'bfd-ui/lib'
    }
  }
}

webpack 配置完成后,即可在代码中使用组件,以 ActionSheet 为例:

import actionSheet from 'bfd/ActionSheet'
 
const ActionSheetBasic = () => {
  return (
    <button onClick={() => {
      actionSheet.show('动作面板', () => {
        return (
          <div>
            这个是一个面板
          </div>
        )
      })
    }}>展示动作面板</button>
  )
}

四、开发规范

  • 向下兼容
  • 单元测试:组件根目录下创建 __tests__ 文件夹【TODO】
  • 代码规范参考 airbnb react

编写一个新组件

npm run create MyComponent

查看: http://localhost:4001/components/MyComponent