【亲测免费】 FastCrud 技术文档

安装指南

前提条件: 确保您的开发环境已搭建Vue3，并且选择了Antdv、Element-Plus或NaiveUI之一作为UI库。

步骤1：添加FastCrud依赖

打开终端，进入您的Vue3项目目录，执行以下命令以安装FastCrud：

npm install fast-crud --save 或者 yarn add fast-crud

如果您计划使用FsAdmin（示例admin脚手架），则需要额外安装其特定依赖，请参考FsAdmin部分。

步骤2：引入并初始化FastCrud

在您的主入口文件或需要使用FastCrud的组件中引入：

import { createApp } from 'vue';
import FastCrud from 'fast-crud';
import 'fast-crud/dist/style.css'; // 引入样式

// 创建Vue应用实例
const app = createApp(App);
app.use(FastCrud); // 注册FastCrud
app.mount('#app');

项目使用说明

FastCrud的设计宗旨是简化CRUD操作。您需要定义CRUD配置对象(crudOptions)，然后调用相应的FastCrud方法。

示例：创建CRUD配置

const crudOptions = {
  columns: {
    id: { title: "ID", type: "number", column: { width: 50 }, form: { show: false } },
    name: { title: "姓名", type: "text", search: { show: true } },
    city: {
      title: "城市",
      type: "dict-select",
      search: { show: true },
      dict: dict({
        value: "id",
        label: "text",
        data: [...], // 字典数据
      }),
    },
    // ... 更多字段配置
  },
};

使用CRUD配置

在Vue组件中，将上述配置应用于FastCrud实例，例如：

<template>
  <fc-table :options="crudOptions"></fc-table>
</template>

<script>
export default {
  data() {
    return {
      crudOptions,
    };
  },
};
</script>

项目API使用文档

FastCrud提供了丰富的方法来控制CRUD流程，例如数据的增删改查（create, retrieve, update, delete）。具体API详情，参见官方文档的API章节，通常您可以通过以下方式进行常见操作：

• 添加记录：利用insert方法。
• 更新记录：通过编辑表格行后自动触发，或者手动调用update。
• 删除记录：使用remove方法，通常结合事件处理。
• 查询数据：配置好crudOptions后，默认由表格控制查询逻辑。

项目安装方式

项目安装主要分为两步：一是FastCrud本身的安装，二是对于特定场景，比如集成FsAdmin或其他admin模板，需遵循各自的安装指导。

• 对于基本使用，按照上述“安装指南”进行操作。
• 若要使用FsAdmin或其他预设的admin框架，需先安装该框架及其所有依赖，随后按照框架文档集成FastCrud。

FsAdmin特别说明

若选择使用FsAdmin作为起点，首先确保满足其依赖要求，然后按照FsAdmin的文档引导进行设置和配置。

---

以上就是FastCrud的基本使用和技术细节概述。更详尽的特性介绍、高级用法和最佳实践，请查阅FastCrud的官方文档和示例。在开发过程中，如果遇到任何疑问，欢迎加入社区交流或寻求作者的支持。记得给该项目在GitHub或Gitee上点赞，支持开源发展！