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中使用echarts(折线图的demo,markline用法)
这篇文章主要介绍了在vue中使用echarts(折线图的demo,markline用法)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要给大家介绍了vue中proto文件函数调用的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2021-08-08
今天小编就为大家分享一篇vue-自定义组件传值的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家介绍了Vue3进阶主题Composition API使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要给大家介绍了关于vue3组件式弹窗打开的3种方式,弹窗组件是常见的交互组件,它能够弹出一些提示信息、提醒用户进行操作等等,需要的朋友可以参考下2023-07-07
vue2和el-input无法修改和写入并且不报错的解决方案
这篇文章主要介绍了vue2和el-input无法修改和写入并且不报错的解决方案,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-07-07
移动端页面，有时候会出现一些固定定位在底部图标，比如购物车等。这篇文章主要介绍了Vue制作固定定位图标滑动隐藏效果,需要的朋友可以参考下2019-05-05
这篇文章主要为大家介绍了Vue3+Spring Framework框架开发实战详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
element的el-upload组件上传文件跨域问题的几种解决
跨域问题网上搜索很多,感觉情况都不一样,本文主要介绍了element的el-upload组件上传文件跨域问题的几种解决,具有一定的参考价值,感兴趣的可以了解一下2024-03-03
element-ui中页面缩放时table表格内容错位的解决
这篇文章主要介绍了element-ui中页面缩放时table表格内容错位的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
最新评论