在vue中搭建spreadJs

最近因工作需要正在学习spreadJs，spreadJs是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件，以“高速低耗、纯前端、零依赖、可嵌入任何操作系统”为产品特色，同时满足 .NET、Java、响应式 Web 应用及移动跨平台的表格数据处理和类 Excel 的表格应用开发，为用户提供更快捷、更安全、更熟悉的表格数据处理方式和更友好的类 Excel 操作体验。

项目框架是基于vue的vue-element-admin，spreadJs可以通过以下两种方式与Vue一起使用：

1. 使用Nuget Package Manager(NPM)
2. 使用传统HTML
   在这里我使用的是第一种方式，话不多说，上干货。

1. 通过npm install 或者在package.json中添加引用的方式安装spread.sheets

我是用npm install方法进行包安装，获取的版本是12.0.9
npm install @grapecity/spread-sheets
npm install @grapecity/spread-sheets-vue

2. 获取到完整包后，项目直接运行npm run dev

在执行过程中，有可能会遇到下面的报错信息
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

解决方案：在webopack增加如下配置

resolve: {
    alias: {
        vue: 'vue/dist/vue.js'
    }
}

3. 新建vue文件

template部分

style部分

javascript部分

至此，spreadJs的表格已搭建完成，可在浏览器中查看效果，后面我会接着介绍表格的应用。