如何解决Luckysheet在Vue离线使用时引入报错的推荐方法？

本文共计673个文字，预计阅读时间需要3分钟。

目录

1.下载源码并运行打包dist

2.将dist文件引入项目

3.应用

4.常见报错

1.下载源码并运行打包dist

- 在项目根目录下执行：`git clone https://github.com/mengshukeji/Luckysheet` - 下载好源码后，进入源码目录，执行：`npm install` - 运行打包命令：`npm run build`

2. 将dist文件引入项目 - 将下载好的dist目录下的所有文件复制到你的项目相应位置

3. 应用 - 在你的项目中引入dist目录下的luckysheet.js和luckysheet.css - 在你的HTML文件中引入这两个文件，并创建一个容器元素

4. 常见报错 - 错误1：执行`npm install`时遇到错误 - 解决方法：检查网络连接，确保能正常访问npm源 - 错误2：运行打包命令时出错 - 解决方法：确保node.js和npm版本兼容

目录

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

1.git下载源码运行打包dist

git源码地址：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中离线使用方法及引入报错的解决方案的文章就介绍到这了,更多相关Luckysheetvue引入报错内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！