drawing-boards

Vue3 + Vite + Ts + Fabric

目录结构

├── lib                         # 打出的包文件
├── package                     # 项目源文件目录主要功能组件
│   └── drawingBoards           # 画板组件
│   │   └── assets              # 静态资源
│   │   │   └── icon            # icon
│   │   └── src                 # 主要代码
│   │       ├── components      # 组件
│   │       ├── utils           # 公共方法
│   │       └── drawingBoards   # 画板主要代码
│   └── index.ts                # 对整个组件库进行导出
├── public                      # 静态资源
├── src                         # 测试发布的组件是否生效
│   ├── App.vue                 # 应用根组件
│   └── main.ts                 # 项目入口，创建 Vue 应用并挂载组件 [这里测试发布组件]
├── vite                        # 插件的配置文件
├── tsconfig.json               # TypeScript 编译配置文件
├── vite.config.ts              # Vite 项目配置文件，包含插件、路径别名等设置
└── README.md                   # 项目说明文档

Installation

npm install drawing-boards
yarn add drawing-boards

Usage

main.ts

// script
import { createApp } from 'vue';
import App from './App.vue';

import drawingBoards from "drawing-boards"
import "drawing-boards/lib/drawing-boards.css"; //引入样式

const app = createApp(App);
app.use(drawingBoards); //全局注册
app.mount('#app');

App.vue

<template>
  <div>
    <drawingBoards />
  </div>
</template>
<script setup lang="ts">
</script>

react示例

1. DrawingBoardsWrapper.tsx 文件

import React, { useRef, useEffect } from 'react';
import { createApp } from 'vue';
import drawingBoards from 'drawing-boards';
import 'drawing-boards/lib/drawing-boards.css';

interface DrawingBoardsProps {
  [key: string]: any;
}

const DrawingBoardsWrapper: React.FC<DrawingBoardsProps> = (props: DrawingBoardsProps) => {
  const containerRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (!containerRef.current) return;
    const app = createApp({
      template: `<drawing-boards ${Object.keys(props).map(key => `:${key}="${props[key]}"`).join(' ')} />`,
    });
    app.use(drawingBoards);
    app.mount(containerRef.current);
    return () => {
      app.unmount();
    };
  }, [props]);
  return <div ref={containerRef} style={{ width: 400, height: 600, border: '10px solid red' }} />;
};

export default DrawingBoardsWrapper;

2. umi示例 .umirc.ts文件

在 import { defineConfig } from 'umi'

export default defineConfig({
  define: {
    '__VUE_OPTIONS_API__': true,
    '__VUE_PROD_DEVTOOLS__': false,
    '__VUE_PROD_HYDRATION_MISMATCH_DETAILS__': false,
  },
  chainWebpack: (config) => {
    config.resolve.alias.set('vue', require.resolve('vue/dist/vue.esm-bundler.js'));
  },
});