第一章:Vue项目 引入LuckySheet

1、前景:在Vue网页开发中,时常会遇到需要在线编辑excel或者是多人同时编辑excel的需求,那怎么办呢?在这里,博主最近也接触了这个需求,通过了解,决定使用LuckSheet这个开发的插件。

2、首先来看一下它的官网:LuckSheet
3、引入LuckSheet
3.1、两种引入方式:CDN和本地引入
3.2、CDN:

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>

3.3、本地引入:
3.3.1、先从官网下载源码:源码
在这里插入图片描述
3.3.2、使用VScode打开,进入CMD,先安装依赖:npm i
在这里插入图片描述
依赖安装结束,再使用 npm run build,进行打包,打包完之后会出现dist文件
在这里插入图片描述
3.3.3、把dist里面的文件(除了index.html外)全部复制到 我们自己的项目中 去。
3.4、新建Vue项目(此过程省略)
3.5、把3.3.2中打包好的 dist 文件夹下的文件移动到我们的public 文件下(也就是跟index.html文件同目录下)
在这里插入图片描述
3.6、使用:
3.6.1、引入
在index.html文件中引入js

<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./plugins/plugins.css' />
<link rel='stylesheet' href='./css/luckysheet.css' />
<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
<script src="./plugins/js/plugin.js"></script>
<script src="./luckysheet.umd.js"></script>

在这里插入图片描述

3.6.1、在页面中使用
HTML:

<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:90%;left: 0px;top: 50px;"></div>

mounted:

mounted() {
            this.init()
        },

methods:

methods:{
            init(){
                var options = {
                    container: 'luckysheet', //luckysheet为容器id
                    title:'luckysheet', //表 头名
                    lang: 'zh', //中文
                }
                luckysheet.create(options)
            }
        },

很多人会有很多疑问:为什么 lucksheet这个变量没有看见引入,其实当我们在index.html 引入的时候,lucksheet 就已经绑定在window的对象中了,所以不需要任何引入。

最后附上我LuckySheet打包出来的文件:LuckySheet打包出来的文件,有需要的自行下载(仅供参考)

  • 12
    点赞
  • 66
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 44
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 44
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

深圳程序员打工崽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值