第一章：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打包出来的文件，有需要的自行下载（仅供参考）

第一章：Vue项目 引入LuckySheet

猜你喜欢

第一章：Vue项目引入LuckySheet