npm 包 @mojule/components 使用教程-JavaScript中文网-JavaScript教程资源分享门户

@mojule/components 是一组摆脱框架束缚的，用于构建 Web 应用的通用组件集合。它提供了一些常用的组件，如按钮、表单、卡片等，使得我们能够更加轻松地构建交互性的用户界面。

安装

npm install @mojule/components

安装完成后，你可以通过以下方式进行引入：

// ES6 Modules
import { Button } from '@mojule/components'

// CommonJS Modules
const { Button } = require( '@mojule/components' )

使用

以一个简单的按钮组件为例，你可以创建以下 HTML 元素：

<button class="button">Click me!</button>

如果你要使用 @mojule/components 中的按钮组件，则需要做以下步骤：

import { Button } from '@mojule/components'

// 获取按钮元素
const button = document.querySelector( '.button' )

// 将其转变为组件
Button( button )

使用 @mojule/components 中的其他组件亦是一样的道理。

示例代码

以下是一个包含两个按钮组件的示例代码：

-- -------------------- ---- -------
------
  ------- ---------------------- ----------
  ------- ---------------------- ----------

  ------- --------------
    ------ - ------ - ---- --------------------

    -- ------
    ----- ------- - ----------------------- ---------- -
    ----- ------- - ----------------------- ---------- -

    -- -------
    ------- ------- -
    ------- ------- -
  ---------
-------

其他注意事项

@mojule/components 是一个通用的组件集合，可以与任何框架或库搭配使用。
组件会针对不同的元素进行渲染，例如 Button() 可以渲染 <button> 元素，而 Input() 可以渲染 <input> 元素等。
@mojule/components 同时提供了 TypeScript 类型定义，方便类型检查和代码提示。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600576a381e8991b448eaaa5