npm 包 qubi 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 是目前最大的 JavaScript 软件包管理器，其中包含了一大批优秀的前端类工具和库。qubi 是 npm 上的一个工具包，旨在为开发者提供更加优美和易用的 UI 组件库，本文将对 qubi 的使用方法进行详细介绍。

安装

我们可以通过 npm 安装 qubi。

npm install qubi --save

使用方法

组件导入

要使用 qubi 中的组件，必须首先将其导入到项目中。我们可以通过以下方式引入组件：

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

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

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

样式引入

使用 qubi 组件前，需要导入 qubi 提供的样式文件。我们可以使用以下方式完成：

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

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

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

组件列表

qubi 包含了一组常用的 UI 组件，以下是部分组件的使用方法：

Button
```
<qubi-button>按钮</qubi-button>
```

Input

<qubi-input v-model="value" placeholder="请输入"></qubi-input>

Checkbox

<qubi-checkbox v-model="isChecked">我同意相关条款</qubi-checkbox>

Radio

<qubi-radio-group v-model="value">
  <qubi-radio label="1">选项一</qubi-radio>
  <qubi-radio label="2">选项二</qubi-radio>
  <qubi-radio label="3">选项三</qubi-radio>
</qubi-radio-group>

export default {
  data() {
    return {
      value: '1'
    };
  }
}

Select

<qubi-select v-model="value">
  <qubi-option value="1">选项一</qubi-option>
  <qubi-option value="2">选项二</qubi-option>
  <qubi-option value="3">选项三</qubi-option>
</qubi-select>

export default {
  data() {
    return {
      value: ''
    };
  }
}

Table

<qubi-table :columns="columns" :data="data"></qubi-table>

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

结语

qubi 提供了一组优美和易用的 UI 组件，为前端开发者提供了不少便利。在使用 qubi 组件时，我们需要先将其导入到项目中，并引入 qubi 的样式文件。本文通过示例代码介绍了 qubi 中一些常用的组件的使用方法，希望对大家有所帮助。

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