快捷導(dǎo)航

Luckysheet?在vue中離線(xiàn)使用及引入報(bào)錯(cuò)的解決方案(推薦)

更新時(shí)間：2022年10月10日 11:41:55 作者：傻小胖

這篇文章主要介紹了Luckysheet?在vue中離線(xiàn)使用方法及引入報(bào)錯(cuò)的解決方案,將dist離線(xiàn)包在項(xiàng)目創(chuàng)建個(gè)文件夾放著，然后根據(jù)放置的位置在?index.html里面引入，下面通過(guò)案例給大家介紹我的項(xiàng)目里面放置的位置，需要的朋友可以參考下

1.git下載源碼運(yùn)行打包dist

git 源碼地址：https://github.com/mengshukeji/Luckysheet

下載好源碼之后執(zhí)行

npm install
npm install gulp -g
 
//跑去源碼看看正常與否
npm run dev
 
//如果正常執(zhí)行打包
npm run build

打包結(jié)束后在目錄下找到 dist 文件

2.將dist文件引入項(xiàng)目

將dist離線(xiàn)包在項(xiàng)目創(chuàng)建個(gè)文件夾放著，然后根據(jù)放置的位置在 index.html里面引入

以下案例是我的項(xiàng)目里面放置的位置

在public下static文件夾（沒(méi)有就新建）下新建luckysheet文件夾，將dist內(nèi)的所有文件拷入

如圖

然后在項(xiàng)目的index.html里面按照相對(duì)路徑引入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.應(yīng)用

 var options = {
      container: "luckysheet",
      title: 'Luckysheet data test', // 設(shè)定表格名稱(chēng)
      lang: 'zh', // 設(shè)定表格語(yǔ)言
      name: "Cell", //工作表名稱(chēng)
    }
    this.$nextTick(() => {
      $(function () {
        luckysheet.create({
          options
        });
      });
    });

4.常見(jiàn)報(bào)錯(cuò)

'$' is not defined

'luckysheet' is not defined no-undef

'jquery' is not defined

等問(wèn)題

'luckysheet' is not defined

查看luckysheet.umd.js資源是否引入成功

'jquery' is not defined

查看plugin.js資源是否引入成功

如果都引入成功就是編譯問(wèn)題，eslint在babel之前執(zhí)行，語(yǔ)法上luckysheet未定義先使用了，所以直接就報(bào)錯(cuò)了；或者或出現(xiàn)一會(huì)兒不報(bào)錯(cuò)一會(huì)兒報(bào)錯(cuò)的情況就是因?yàn)閑slint和babel的執(zhí)行次序發(fā)生了變化

解決方案：

1.找到eslint的配置項(xiàng)禁用相應(yīng)的eslint檢測(cè)機(jī)制(詳情見(jiàn)eslint的參數(shù)配置)

2.在vue.config.js中禁用整個(gè)eslint

module.exports = {
  lintOnSave: false
}

踩坑記錄

到此這篇關(guān)于Luckysheet 在vue中離線(xiàn)使用方法及引入報(bào)錯(cuò)的解決方案的文章就介紹到這了,更多相關(guān)Luckysheet vue引入報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: