安装

使用NPM安装：

npm install big-screen-designer

使用Yarn安装：

yarn add big-screen-designer

然后，你可以在你的项目中导入并使用 BigScreenDesigner 设计器组件：

import Vue from 'vue';
import {BigScreenDesigner, Config} from 'big-screen-designer';
// 国际化
import zhCN from 'big-screen-designer/lib/i18n/locales/zhCN.json';
import enUS from 'big-screen-designer/lib/i18n/locales/enUS.json';

import 'big-screen-designer/lib/index.css';

// 注册图片资源
const images = import.meta.glob('/node_modules/big-screen-designer/src/assets/images/**/*.png', {eager: true, query: 'url', import: 'default'});
// 注册国际化
Config.Locale.register('zhCN', zhCN);
Config.Locale.register('enUS', enUS);
// 设置默认语言
Config.Locale.setLocale('zhCN');
// 设置图片获取函数
Config.stepConfig({
    getImageUrl: (path) => {
        path = path.replace('@', '/node_modules/big-screen-designer/src');
        return images[path];
    }
});
// 注册全局方法
Vue.prototype.$it = (key, args) => {
    return Config.Locale.i18n.$t(key, args);
};

export default {
    components: {
        BigScreenDesigner
    }
}

然后在项目中导入并使用 BigScreenPreview 预览组件：

import {BigScreenPreview} from 'big-screen-designer';

import 'big-screen-designer/lib/index.css';

export default {
    components: {
        BigScreenPreview
    }
}