什么是 killara
killara 是一个基于 Vue.js 的 UI 组件库，提供了丰富的 UI 组件和工具，包括按钮、输入框、表格、图表等等。使用 killara 可以帮助前端开发者提高开发效率，快速搭建符合设计规范的界面。
安装和使用
安装
在命令行界面中输入以下命令进行 killara 的安装
npm install killara --save
使用
在需要使用 killara 的项目中导入并注册 killara 组件，例如：
-- -------------------- ---- -------
----------
-----
---------------- --------------
------
-----------
--------
------ - -------- - ---- ---------
------ ------- -
----------- -
--------
-
-
---------以上的代码将导入并注册了一个按钮组件，你可以在模板中使用 <kl-button> 标签以展示该组件。
自动按需加载
killara 基于 babel-plugin-component 实现了自动按需加载，因此可以在项目中按需引入组件，实现更小的包大小和更快的加载速度。具体步骤如下：
安装 babel-plugin-component
npm install babel-plugin-component -D
修改 babel 配置文件
在 .babelrc 文件中添加以下内容：
-- -------------------- ---- ------- - ---------- - ------------------------------ -- ---------- - - ------------ - -------------- ---------- ------------------- ------------- - - - -注意，在安装了 Vue Cli 3 的情况下，可以直接通过 vue.config.js 实现按需加载，具体可参见官方文档。
组件列表
Button 按钮
按钮可以帮助用户完成点击、提交等操作。该组件提供了不同颜色和尺寸的样式，并支持不同的点击事件。常用属性如下：
- type：按钮类型，可选值为 primary、success、warning、danger、info、text，默认为 default。
- size：按钮尺寸，可选值为 medium、small、mini，默认为 medium。
- disabled：禁用按钮，可选值为 true 或 false，默认为 false。
- icon：图标类名，在按钮旁边添加一个图标。
- round：圆角按钮，在按钮两侧添加圆角。
- circle：圆形按钮，将按钮变为圆形。
-- -------------------- ---- -------
----------
-----
------------------------------
---------- ----------------------------------
---------- ----------------------------------
---------- ----------------------------------
---------- --------------------------------
---------- ----------------------------
---------- ----------------------------
---------- ----------------------------------------
---------- ----------- ----------------
---------- ------------------------
------
-----------Input 输入框
输入框可以帮助用户快速输入文本或数字，并支持特定的格式和校验。该组件提供了不同类型和大小的样式，并支持不同的输入事件。常用属性如下：
- type：输入框类型，可选值为 text、password、textarea、url、email、date、number、tel 等等，默认为 text。
- size：输入框尺寸，可选值为 medium、small、mini，默认为 medium。
- placeholder：输入框占位符。
- disabled：禁用输入框，可选值为 true 或 false，默认为 false。
- readonly：只读输入框，可选值为 true 或 false，默认为 false。
- clearable：可清空输入框，可选值为 true 或 false，默认为 false。
- maxlength：最大输入长度。
- autofocus：自动获取焦点，可选值为 true 或 false，默认为 false。
-- -------------------- ---- -------
----------
-----
--------- -------------------- ------------------ ------------- --
--------- --------------- ----------------------- ------------------ ------------- --
--------- --------------- ----------------------- ------------------ ------------ --
--------- ------------- --------------------- ------------------ ---------- --
--------- ----------- ------------------- ------------------- -------- --
--------- ---------- ------------------ ------------------ ------- --
--------- ------------ -------------------- ------------------ --------- --
------
-----------
--------
------ ------- -
------ -
------ -
----------- ---
-------------- ---
-------------- ---
------------ ---
---------- ---
--------- ---
----------- --
-
-
-
---------Table 表格
表格可以帮助用户以表格的形式展示数据，并支持排序、筛选等操作。该组件支持分页和多选，还可以自定义表格样式。常用属性如下：
- data：表格数据，必须是一个数组对象。
- columns：表头数据，必须是一个数组对象。
- height：表格高度，可以是一个数字、百分数或 auto。
- stripe：斑马纹样式，可选值为 true 或 false，默认为 false。
- border：展示边框，可选值为 true 或 false，默认为 false。
- fit：列宽自动调整，可选值为 true 或 false，默认为 true。
- show-header：展示表头，可选值为 true 或 false，默认为 true。
- show-summary：展示表尾合计行，可选值为 true 或 false，默认为 false。
- sum-text：表尾合计行前缀。
- summary-method：表尾合计行生成方法。
-- -------------------- ---- -------
----------
-----
--------- ----------------- ----------------------- ------------------------
------
-----------
--------
------ ------- -
------ -
------ -
---------- -
-
----- -------
---- ---
------- ------
--
-
----- -------
---- ---
------- --------
-
--
------------- -
-
------ -------
----- ------
--
-
------ ------
----- -----
--
-
------ ---------
----- --------
-
-
-
-
-
---------图表
killara 也提供了多种图表组件，帮助用户以可视化的方式展示数据。该部分组件需要依赖 echarts 库，因此需要先进行安装。
安装 echarts 库
npm install echarts --save
折线图
折线图可以帮助用户以折线的形式展示数据的变化趋势，该组件提供了多种样式和主题，并支持不同的自定义配置，常用属性如下：
- title：图表标题，可以是一个字符串、数组对象或一个对象。
- legend：图例组件，可以是一个字符串、数组对象或一个对象。
- tooltip：提示框组件，可以是一个字符串、数组对象或一个对象。
- xAxis：直角坐标系 X 轴，可以是一个字符串、数组对象或一个对象。
- yAxis：直角坐标系 Y 轴，可以是一个字符串、数组对象或一个对象。
- series：系列列表，必须是一个数组对象。
-- -------------------- ---- -------
----------
-----
-------------- -------------------- --
------
-----------
--------
------ ------- ---- ---------
------ ------- -
------ -
------ -
----------- -
------ -
----- ----- ------
--
------- -
----- -------- --- ------- ---
--
------ -
----- -----------
----- ------- ------ ------ ------ ------ ------ ------
--
------ -
----- -------
--
------- -
-
----- ------- ---
----- -------
----- ----- ---- ---- ---- ---- ---- ----
--
-
----- ------- ---
----- -------
----- ----- ---- ---- ---- ---- ---- ----
-
-
-
-
--
--------- -
------------------------------------------------------------------------------
-
-
---------柱状图
柱状图可以帮助用户以柱状的形式展示数据的数量或者比例，该组件提供了多种样式和主题，并支持不同的自定义配置，常用属性如下：
- title：图表标题，可以是一个字符串、数组对象或一个对象。
- legend：图例组件，可以是一个字符串、数组对象或一个对象。
- tooltip：提示框组件，可以是一个字符串、数组对象或一个对象。
- xAxis：直角坐标系 X 轴，可以是一个字符串、数组对象或一个对象。
- yAxis：直角坐标系 Y 轴，可以是一个字符串、数组对象或一个对象。
- series：系列列表，必须是一个数组对象。
-- -------------------- ---- -------
----------
-----
------------- ------------------- --
------
-----------
--------
------ ------- ---- ---------
------ ------- -
------ -
------ -
---------- -
------ -
----- ---- ------
--
------- -
----- -------- --- ------- ---
--
------ -
----- -----------
----- ------- ------ ------ ------ ------ ------ ------
--
------ -
----- -------
--
------- -
-
----- ------- ---
----- ------
----- ----- ---- ---- ---- ---- ---- ----
--
-
----- ------- ---
----- ------
----- ----- ---- ---- ---- ---- ---- ----
-
-
-
-
--
--------- -
----------------------------------------------------------------------------
-
-
---------总结
本文介绍了 killara 的安装和使用方法，并详细介绍了其中几个重要的 UI 组件和图表组件，包括按钮、输入框、表格、折线图、柱状图等。killara 提供了丰富的 UI 组件和工具，并支持自定义样式和主题，可以帮助前端开发者提高开发效率，快速搭建符合设计规范的界面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fda81e8991b448dd723