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

在前端开发中，我们常常需要使用 UI 组件来提升页面交互效果，jf-ui-vue 就是其中的一款。jf-ui-vue 是一个基于 Vue.js 的 UI 库，提供了大量常用组件，比如按钮、表格、弹框等，并且支持主题定制。本教程将详细介绍 jf-ui-vue 的安装与使用。

安装

使用 jf-ui-vue 前需要安装 Vue.js，具体安装方式请参考官方文档。以下是使用 npm 安装 jf-ui-vue 的方式：

npm i jf-ui-vue -S

使用

全局引入

在入口文件中引入 jf-ui-vue：

import Vue from 'vue'
import JfUI from 'jf-ui-vue'

Vue.use(JfUI)

这样，所有 jf-ui-vue 的组件都可以在应用中使用了。例如：

<template>
  <j-button type="primary">点击</j-button>
</template>

按需引入

如果你只需要使用 jf-ui-vue 某些组件，可以采用按需引入的方式。需要先安装 babel-plugin-component：

npm i babel-plugin-component -D

然后修改 .babelrc 文件，增加如下配置：

{
  "plugins": [
    ["component", {
      "libraryName": "jf-ui-vue",
      "styleLibraryName": "theme-default"
    }]
  ]
}

最后只需在需要使用的组件中引入即可：

import { Button } from 'jf-ui-vue'

export default {
  components: {
    'j-button': Button
  }
}

组件列表

jf-ui-vue 提供了以下常用组件：

Button

type：按钮类型，可选值为 primary、success、warning、danger 和 info，不传默认为 default

<template>
  <j-button type="primary">主要按钮</j-button>
  <j-button type="success">成功按钮</j-button>
  <j-button type="warning">警告按钮</j-button>
  <j-button type="danger">危险按钮</j-button>
  <j-button type="info">信息按钮</j-button>
  <j-button>默认按钮</j-button>
</template>

Input

placeholder：占位符

<template>
  <j-input placeholder="请输入"></j-input>
</template>

Table

columns：表格列配置，是一个数组，每个元素是一个对象，包含 title（列名）和 key（对应数据中的字段名）
data：表格数据，是一个数组，每个元素代表一行数据，是一个对象，属性名需要和 columns 中的 key 相对应

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

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

Dialog

visible：是否显示
title：弹框标题

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

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

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

主题定制

jf-ui-vue 支持主题定制。首先，需要安装 less 和 less-loader：

npm i less less-loader -D

然后，在入口文件中引入需要的主题样式：

import 'jf-ui-vue/lib/theme-default/index.css'

// 或者
// import 'jf-ui-vue/lib/theme-chalk/index.css'

最后，在 webpack 配置文件中增加 less-loader：

{
  test: /\.less$/,
  loader: 'style-loader!css-loader!less-loader'
}

这样，主题样式就可以定制了。

结语

本教程详细介绍了 jf-ui-vue 的安装与使用，并且介绍了按需引入、组件列表和主题定制等功能，希望对大家有所帮助。

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