如何在 vue 中设置 Fabric.js？答案

【问题标题】：How can I set up Fabric.js in vue?如何在 vue 中设置 Fabric.js？
【发布时间】：2017-07-09 17:17:03
【问题描述】：

我刚刚遇到了相同的组合：Fabric.js 和 Vue.js 并且想知道，但是我正在使用 VueJs 几天，我不知道如何在 vue 中设置结构。
可以分享一下经验吗？

【问题讨论】：

【解决方案1】：

假设您正在使用 ES6 和诸如 Webpack 之类的打包程序，您可以按如下方式开始使用 Fabric.js：

在命令行

npm install fabric

或

yarn add fabric

然后将其导入您的 .js 文件中。

import { fabric } from 'fabric'

然后在 Vue 的 mounted: 方法中设置你的 Canvas。

注意：对我来说，默认的 fabric npm 模块导致了相当大的包。我最终改用fabric-browseronly 模块。 Fabric.js 有很多您可能不需要的功能，在这种情况下，您可以构建自己的版本here 或通过命令行。

【讨论】：

编辑：created 发生在 DOM 被绘制之前，因此组件尚未渲染要绑定的 DOM...
这在通过 npm 安装 fabric-browseronly 时也有效
我正在使用 Vue 3 和 Vite，当我使用导入方法时，我得到：SyntaxError: The requested module '/@modules/fabric/dist/fabric.js' does not provide an export named 'fabric'

【解决方案2】：

安装 Fabric

yarn add fabric # or npm install -s fabric

基本组件（基于@laverick 的回答）：

<template>
  <canvas ref="can" width="200" height="200"></canvas>
</template>

<script>
import { fabric } from 'fabric';

export default {
  mounted() {
    const ref = this.$refs.can;
    const canvas = new fabric.Canvas(ref);
    const rect = new fabric.Rect({
      fill: 'red',
      width: 20,
      height: 20
    });
    canvas.add(rect);
  }
};
</script>

【讨论】：

非常感谢，您在这段代码上帮了我很多忙

【解决方案3】：

Fabric 遵循非常传统的分布布局。

您想使用dist 目录中的文件。 fabric.js 用于开发工作，fabric.min.js 用于实时站点。

【讨论】：