Vue.js - 实现Luckysheet的本地引入使用

2022-02-23 发布：hangge 阅读：2103

Luckysheet 是一款纯前端类似 excel 的在线表格组件。其功能强大、配置简单、完全开源。由于 Luckysheet 现在还没有发布出模块化的开发，不能使用 npm，所以要使用 Luckysheet 通常有 CDN 和手动本地引入两种方式。

虽然 CDN 方式很方便，但在一些特殊环境下（比如纯内网环境），还是需要通过本地引入来使用，下面通过样例进行演示。

1，编译组件代码

（1）首先到 Luckysheet 的 GitHub 主页上将其源码下载到本地：

GitHub 主页：https://github.com/mengshukeji/Luckyexcel

（2）进入到源码文件夹，执行如下命令安装相关依赖以及 gulp：

npm install
npm install gulp -g

（3）最后执行如下命令进行编译打包：

npm install gulp -g

2，引入组件

（1）编译后将 dist 目录下的 plugins、css、assets 这三个文件夹以及 luckysheet.umd.js 复制到 Vue 项目中的 public 文件夹下（为方便维护我这里放在 public/luckysheet 文件夹下）

（2）最后编辑 vue 项目 public/index.html 文件，添加如下代码引入即可使用：

<link rel='stylesheet' href='./luckysheet/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./luckysheet/plugins/plugins.css' />
<link rel='stylesheet' href='./luckysheet/css/luckysheet.css' />
<link rel='stylesheet' href='./luckysheet/assets/iconfont/iconfont.css' />
<script src="./luckysheet/plugins/js/plugin.js"></script>
<script src="./luckysheet/luckysheet.umd.js"></script>