Luckysheet 在vue中离线使用及引入报错的解决方案(推荐)

目录
  • 1.git下载源码运行打包dist
  • 2.将dist文件引入项目
  • 3.应用
  • 4.常见报错

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引入报错内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue中引入swiper报错的问题及解决

    目录 首先上报错信息 下载swiper6.x版本 首先上报错信息 -----------更新------------------------------------------- 都是由于版本问题惹得锅!!! 刚开始我的swiper安装的是最新版,也就是7.0的版本,但是报各种错,我就降成了6.0的版本. 页面是可以正常显示出来了,但是我的swiper的options配置完全不起作用,不能自动播放,也不显示分页器注意. 查询得知VUE2对于高版本的swiper可能兼容性不好,所以我卸载了6.0的

  • vue 图片路径 “@/assets“ 报错问题及解决

    目录 问题 解决 为什么 静态导入文件路径 静态导入绝对路径 动态导入相对路径 动态导入绝对路径 问题 在更改背景图片时写的图片相对路径是这样的: 由于@在webpack 被resolve.alias配置下等价于/src,然后直接运行了程序结果报错了 报错状态: 大概意思就是说,无法解析 asset 包 解决 经过查询资料找到了解决办法: 由于相对根目录的路径 “/assets/background.png” webpack不解析 此时需要在@前加上“~” 因为带“~”的路径 “~@/asset

  • vue报错Failed to execute 'appendChild' on 'Node'解决

    目录 一.问题描述 二.解决过程 一.问题描述 某天在开发需求时发现,业务页面上报告了一个Script error. 由于vconsole看不到详细报错信息,于是在chrome上打开,具体报错信息如下: Uncaught DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method. at Object.appendChild 看起来是vue2.6.12包里

  • vue使用百度地图报错BMap is not defined问题及解决

    目录 使用百度地图报错BMap is not defined vue导入百度地图BMap 使用百度地图报错BMap is not defined 1.在index.html添加 密钥申请:http://lbsyun.baidu.com/apiconsole/key <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script

  • 关于Vue ui 的没反应、报错问题解决总结

    目录 Vue ui 的没反应.报错问题 一.vue ui 启动出现的报错问题 Vue ui无法启动项目管理器 原因 遇到版本低的解决方案 没有ui功能的解决方法 Vue ui 的没反应.报错问题 一.vue ui 启动出现的报错问题 vue ui 输入后 回车没反应? cmd 输入: vue ui // 没反应 原因一:安装的 nodejs 和 node_modules(有npm) 没有在同一个目录下: 安装时会默认安装在"C:\Program Files…"里的. 解决: (1)卸载

  • Luckysheet 在vue中离线使用及引入报错的解决方案(推荐)

    目录 1.git下载源码运行打包dist 2.将dist文件引入项目 3.应用 4.常见报错 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离线包

  • Vue中axios的封装（报错、鉴权、跳转、拦截、提示）

    统一捕获接口报错 弹窗提示 报错重定向 基础鉴权 表单序列化 实现的功能 统一捕获接口报错 : 用的axios内置的拦截器 弹窗提示: 引入 Element UI 的 Message 组件 报错重定向: 路由钩子 基础鉴权: 服务端过期时间戳和token,还有借助路由的钩子 表单序列化: 我这边直接用 qs (npm模块),你有时间也可以自己写 用法及封装 用法 // 服务层 , import默认会找该目录下index.js的文件,这个可能有小伙伴不知道 // 可以去了解npm的引入和es6引入

  • 详解Vue中使用v-for语句抛出错误的解决方案

    Vue 中使用v-for语句抛出错误的解决方案 今天在维护以前的项目的时候遇见了下面的报错情况,开始我以为是因为jQuery和Vue冲突了,所以把以前的jQuery改了,但是还是出现同样的错误-通过查阅资料,发现是因为循环的变量里面的值重复了,导致Vue报错. 复制代码 代码如下: Uncaught (in promise) TypeError: Cannot read property 'removeChild' of null 接下来查了一下解决方案,发现在Vue 2.0之前的版本可以通过在

  • 解决Vue 给mapState中定义的属性赋值报错的问题

    1. 实践环境 Vue 2.9.6 2. 问题描述 <script> import { mapState } from 'vuex'; export default { name: "displayCount", computed: { ...mapState({ ...略 count: state => state.a.count }) }, methods: { increaseCount () { this.count = this.count + 1 } }

  • VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决

    问题现象 项目使用vue/cli3脚手架搭建的前端项目,vue版本为2.6.10. browserslist的配置如下: [ "> 1%", "last 2 versions"] 但开发环境的IE11打开显示白屏,F12打开显示: 分析过程 5306行显示 "./node_modules/_debug@4.1.1@debug/src/browser.js"这个路径报错,由于eval()包含的代码中有ES6的语法,IE不支持,查了网上很多资料

  • 解决vue.js 数据渲染成功仍报错的问题

    最近在做一个vue项目,用的是官方推荐的axios请求数据,数据结构是一级对象嵌套二级对象,发现一级对象数据渲染不报错,二级数据渲染报错.很是郁闷!data函数如下 export default { name: 'hello', data() { return { card:{} } } } 返回的数据如下: { "object":{ "subObject":"123", ... } } 报错的原因是在data函数return的card里没有二级

  • 解决vue项目运行npm run serve报错的问题

    先来一张报错的截图 先去配置环境变量 C:\Users\lgd\AppData\Local\Programs\Microsoft VS Code\bin的后面配置 :%SystemRoot%\system32;一定要注意分号, 然后在path环境中配置C:\Windows\System32 最后去项目安装依赖 npm i 运行项目 npm run serve 如果这样子项目还是报同样的错误,那么就把node全局卸载,去控制面板卸载,然后安装,最后安装依赖,运行项目就可以成功了 补充知识:vue

  • Typescript中使用引用路径别名报错的解决方法

    Typescript中使用引用路径别名报错的解决方法

    在TS中引用路径别名提示找不到模块或者相应的声明 1.ts中使用路径别名报错 在react中通常路径别名都是在webpack的webpack.config.js文件中配置的,但是在引入了ts之后,webpack中的路径别名引用失效了此时我们需要在跟src文件同级目录的tsconfig.json文件中添加配置: 注意要在compilerOptions中添加(webpack中的路径也需要配置) "compilerOptions": { "target": "e

  • 解决Python中字符串和数字拼接报错的方法

    解决Python中字符串和数字拼接报错的方法

    前言 众所周知Python不像JS或者PHP这种弱类型语言里在字符串连接时会自动转换类型,如果直接将字符串和数字拼接会直接报错. 如以下的代码: # coding=utf8 str = '你的分数是:' num = 82 text = str+num+'分 | 琼台博客' print text 执行结果 直接报错:TypeError: cannot concatenate 'str' and 'int' objects 解决这个方法只有提前把num转换为字符串类型,可以使用bytes函数把int

随机推荐