Luckysheet 在vue中离线使用及引入报错的解决方案(推荐)
1.git下载源码运行打包dist
git 源码地址：https://github.com/mengshukeji/Luckysheet
下载好源码之后执行
npm install npm install gulp -g //跑去源码看看正常与否 npm run dev //如果正常执行打包 npm run build
打包结束后在目录下找到 dist 文件
2.将dist文件引入项目
将dist离线包在项目创建个文件夹放着，然后根据放置的位置在 index.html里面引入
以下案例是我的项目里面放置的位置
在public下static文件夹（没有就新建）下新建luckysheet文件夹，将dist内的所有文件拷入
如图
然后在项目的index.html里面按照相对路径引入luckysheet文件
<link rel='stylesheet' href='static/luckysheet/plugins/css/pluginsCss.css' /> <link rel='stylesheet' href='static/luckysheet/plugins/plugins.css' /> <link rel='stylesheet' href='static/luckysheet/css/luckysheet.css' /> <link rel='stylesheet' href='static/luckysheet/assets/iconfont/iconfont.css' /> <script src="static/luckysheet/plugins/js/plugin.js"></script> <script src="static/luckysheet/luckysheet.umd.js"></script>
3.应用
var options = {
container: "luckysheet",
title: 'Luckysheet data test', // 设定表格名称
lang: 'zh', // 设定表格语言
name: "Cell", //工作表名称
}
this.$nextTick(() => {
$(function () {
luckysheet.create({
options
});
});
});4.常见报错
'$' is not defined
'luckysheet' is not defined no-undef
'jquery' is not defined
等问题
'luckysheet' is not defined
查看luckysheet.umd.js资源是否引入成功
'jquery' is not defined
查看plugin.js资源是否引入成功
如果都引入成功就是编译问题，eslint在babel之前执行，语法上luckysheet未定义先使用了，所以直接就报错了；或者或出现一会儿不报错一会儿报错的情况就是因为eslint和babel的执行次序发生了变化
解决方案：
1.找到eslint的配置项禁用相应的eslint检测机制(详情见eslint的参数配置)
2.在vue.config.js中禁用整个eslint
module.exports = {
lintOnSave: false
}
踩坑记录
到此这篇关于Luckysheet 在vue中离线使用方法及引入报错的解决方案的文章就介绍到这了,更多相关Luckysheet vue引入报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue addRoutes路由动态加载操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了Vue下路由History模式打包后页面空白，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
Vue使用pdf.js和docx-preview实现docx和pdf的在线预览
这篇文章主要为大家详细介绍了在Vue中使用pdf.js和docx-preview实现docx和pdf的在线预览的相关知识,文中的示例代码讲解详细,需要的可以参考下2025-03-03
这篇文章主要介绍了vue实现点击当前标签高亮效果的思路详解，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2018-06-06
本文主要介绍了vue2+springsecurity权限系统的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了Vue3中ref和reactive的使用场景,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
这篇文章主要介绍了vue2实现封装动态表单组件，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
这篇文章主要给大家介绍了Node.js使用orm2进行update操作时关联字段无法修改的解决方法，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-06-06
这篇文章主要为大家详细介绍了vue实现本地存储添加删除修改功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
Vue之Element级联选择器多选传值以及回显方式(树形结构)
这篇文章主要介绍了Vue之Element级联选择器多选传值以及回显方式(树形结构)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
最新评论