html引入luckySheet插件详细步骤（小白版）

项目准备

1.git下载源码并使用IDEA打开，在”终端“中，依次运行以下代码

npm install
//执行结束后
npm install gulp -g
//run一下，看看是否正常
npm run dev
//如果运行正常，开始打包
npm run build

2.打包结束后，将dist里的文件复制到你项目的文件夹中

引入文件

1.在html文件中，引入luckySheet的脚本和样式文件

    <link rel='stylesheet' th:href="@{/luckySheet/plugins/css/pluginsCss.css}" />
    <link rel='stylesheet' th:href="@{/luckySheet/plugins/plugins.css}"   />
    <link rel='stylesheet' th:href="@{/luckySheet/css/luckysheet.css}"   />
    <link rel='stylesheet' th:href="@{/luckySheet/assets/iconfont/iconfont.css}"  />
    <script th:src="@{/luckySheet/plugins/js/plugin.js}" ></script>
    <script th:src="@{/luckySheet/luckysheet.umd.js}" ></script>```

2.初始化容器
新建div作为表格的容器

<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>```

js初始化

 const options = {
                container: 'luckysheet', // 设定DOM容器的id
                title: 'demo', // 设定表格名称
                lang: 'zh', // 设定表格语言
                // 更多其他设置...
            }
            luckysheet.create(options);

效果

遇到的问题以及解决方法

这是由于自己的项目自带的jQuery和luckySheet打包的jQuery产生冲突导致
解决方法：将以下代码移入标签之后，js将会在页面渲染结束后加载。

<script th:src="@{/luckySheet/plugins/js/plugin.js}" ></script>
<script th:src="@{/luckySheet/luckysheet.umd.js}" ></script>

引起之后的问题：页面的上的图标不显示，如图：

原因分析及解决方法：
通过对原开源项目demo的测试发现，图片的加载发生在luckysheet.umd.js加载之后，所以将之前引入的luckysheet相关的文件全部放到标签后加载，成功解决该问题
学艺不精，如有错处，还请各位大佬指正

end

感谢各位开源项目参与者做出的贡献