node package manager
Painless code sharing. npm Orgs help your team discover, share, and reuse code. Create a free org »

duid

Dui design

npm package

说明

  • 基于ant-design
  • 用于前端后台快速开发
  • 使用react

Install

npm install duid

Usage

import { DatePicker } from 'duid';
ReactDOM.render(<DatePicker />, mountNode);

And import style manually:

import 'duid/dist/antd.css';  // or 'duid/dist/antd.less'

Use modularized antd

  • Use babel-plugin-import (Recommended)

    // .babelrc or babel-loader option 
    {
      "plugins": [
        ["import", { libraryName: "duid", style: "css" }] // `style: true` for less 
      ]
    }

    Then you can import components from antd, equivalent to import manually below.

    // import js and css modularly, parsed by babel-plugin-import
    import { DatePicker } from 'duid';
  • Manually import

    import DatePicker from 'duid/lib/date-picker';  // for js
    import 'duid/lib/date-picker/style/css';        // for css
    // import 'duid/lib/date-picker/style';         // that will import less

TypeScript

// tsconfig.json 
{
  "compilerOptions": {
    "moduleResolution": "node",
    "jsx": "preserve",
    "allowSyntheticDefaultImports": true
  }
}

Note:

  • set allowSyntheticDefaultImports to prevent error TS1192: Module 'react' has no default export.
  • Don't use @types/antd, antd provide a built-in ts definition already.

Development

$ git clone git@github.com:bullyork/dui_design.git
$ npm install
$ npm start

Open your browser and visit http://127.0.0.1:8001