前言
最近有需求，把 el-table 和 vxe-table 替换为 luckysheet。据说这个可以实现和 excel 的互相复制粘贴，便于用户操作。
官方文档中 Luckysheet 安装 有两种方式：
- cdn 引入：有可能不是最新的，需要指定版本号。
- 本地引入。
居然没有 npm 安装，也是很奇特。
因此，我采取了本地引入的方式。
下载 zip 包
从 luckysheet在gitee的地址 下载 zip 包，如下图所示：
下载依赖包并打包
zip 下载完毕后，用 vscode 打开，打开终端，输入 npm i 下载依赖包；
包下载完毕后，输入 npm run build 打包；
复制粘贴
打包完毕后，根目录会出现 dist 文件夹。把 dist 中除了 index.html 之外的全部文件，复制到目标项目的 public 文件夹中；
并在目标项目的 index.html 中粘贴以下内容：
<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./plugins/plugins.css' />
<link rel='stylesheet' href='./css/luckysheet.css' />
<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
<script src="./plugins/js/plugin.js"></script>
<script src="./luckysheet.umd.js"></script>
验证
在目标项目新建一个 vue 页面，粘贴以下内容进行测试：
<template>
<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return {}
},
mounted() {
this.init()
},
methods:{
init() {
var options = {
container: 'luckysheet' //luckysheet为容器id
}
luckysheet.create(options)
}
}
}
</script>
打开终端，输入 npm run dev 运行项目，可看到页面显示如下，且控制台不报错，就说明安装 luckysheet 成功了。
